This document provides tips for boosting performance in React and Webpack applications. It discusses various optimizations that can improve build speed and bundle size for development and production environments. Some of the key recommendations include using PureComponent to minimize unnecessary re-renders, avoiding large JSX blocks, code splitting, tree shaking with Webpack 2, and leveraging tools like HappyPack, UglifyJS, and CSS loaders.

1. Steps for
Boosting React
and Webpack
Performance
Grgur Grisogono
@ggrgur
1
Modus Create
@moduscreate
6bit.ly/reactpack-live

2. Grgur
Grisogono
2
Software Architect
@moduscreate

3. Performance = Speed

4. What is Speed
?

5. Who’s the consumer?

6. End User Experience

7. Bundle
Size

8. Developer Experience

9. (Re)Build
Speed

10. Agenda
Webpack perf
React perf
Babel perf

11. Node
Environment
Avoid development code execution

12. Node
Environment
Build Perf (Dev) Bundle Perf (Prod)
✔N/A

13. SourceMaps
Selection
Choose the right SourceMap kind
(devTool) for your build type

14. SourceMaps
Selection
Build Perf (Dev) Bundle Perf (Prod)
✔✔

15. UglifyJS
Minify production source code.
Hint: React 15 doesn’t support IE8

16. UglifyJS
Build Perf (Dev) Bundle Perf (Prod)
✔✘

17. !
UglifyJS • UglifyJS works great with
GZIP
• Also removes dead code
• Preserves SourceMaps
• Can be configure to
remove @license
comments
• Avoid in development

18. identName Hashes
(CSS Modules, Chunk names)
Hash name generation is best used in
prod. Descriptive names in dev.
https://github.com/webpack/loader-utils#interpolatename

19. identName Hashes
Build Perf (Dev) Bundle Perf (Prod)
✔✘

20. Disable Autoprefixer
in development
Autoprefixer adds vendor prefixes for
CSS, but also adds build overhead

21. Disable Autoprefixer in
development
Build Perf (Dev) Bundle Perf (DEV)
✔✔

22. CSS Loader v0.14.5
This older version of CSS loader is
much faster at processing CSS (but it
doesn’t support all features like CSS
composition)

23. CSS Loader v0.14.5
Build Perf (Dev) Bundle Perf (Prod)
✔ ?

24. !
CSS
Loader
v0.14.5
• Much faster for CSS
processing
• Doesn’t use expensive
dependencies (e.g.
PostCSS)
• Composition not available

25. Parallelize build with
HappyPack
Multi-threading for Webpack Builds.
Works with any loader (SCSS and
LESS, too)

26. Parallelize build with
HappyPack
Build Perf (Dev) Bundle Perf (Prod)
✔ N/A

27. Create DLL bundles
DLLs contain infrequently changed
code (libraries) to avoid unneeded
processing

28. Create DLL bundles
Build Perf (Dev) Bundle Perf (Prod)
✔ N/A

29. !
Create
DLL
bundles
• A way of caching
• Avoid rebuilding of
libraries
• Not needed for production
• Requires a custom DLL
build config

30. Code Splitting
(Chunking)
Separate application core from
meaningful modules and load them on
demand

31. Code Splitting
(Chunking)
Route path
Splitting API
Chunk name

32. Code Splitting
(Chunking)
Build Perf (Dev) Bundle Perf (Prod)
✔N/A
👁👁
*perceived performance

33. !
Code
Splitting
(Chunking)
• Automatic code splitting
based on require rules
• Asynchronous
• Work great with React
Router
• Improve perceived
performance
• Improved TTII (Time to
Initial Impression)

34. Import Dependencies
Directly
Instead of importing the entire bundle,
import direct files where possible

35. Import Dependencies
Directly
Build Perf (Dev) Bundle Perf (Prod)
✔✔

36. !
Import
Dependencies
Directly
• Poor man’s dead code
elimination
• Improves code splitting

37. Export Only What You
Need
Exports create overhead and increase
bundle size

38. Export Only What You
Need
Build Perf (Dev) Bundle Perf (Prod)
✔N/A

39. React Optimizations
in Babel Config
Remove unneeded React code in Prod

40. React Optimizations in
Babel Config
Build Perf (Dev) Bundle Perf (Prod)
✔✘

41. #1 React Perf Tip
The key to all React performance is
avoiding wasteful CPU cycles.
Most frequently this means optimizing
the render() function.

42. Use PureComponent
Extend React.PureComponent to
minimize render() execution count
(requires React ^15.3.0)

43. !
Use
PureComponent
• Render only when
properties or state has
changed
• Replaces shallow-
compare add-on
• Beware of nested
state objects

44. Don’t Assign JSX to
Variables
Use Functional (Stateless)
Components instead to minimize
render count
Bad

45. Avoid Large JSX
Blocks
Use Functional (Stateless)
Components instead to minimize
render count and keep code
maintainable

46. Normalize State
Deeply nested objects (e.g. API)
should be flattened to ensure efficient
state processing
https://github.com/paularmstrong/normalizr

47. Use Memoized
Selectors (Reselect)
Compute (and memoize) derived data
to minimize Redux state.
https://github.com/reactjs/reselect

48. Keep Redux Action
Names Short
Constant string names do not have to
be long. They cannot be minified.

49. Bonus Tips

50. Use Node v6.x
Up to 30% faster with Webpack and
Server Side Rendering

51. Enable HMR
Don’t forget Hot Module Replacement
for React components and Redux
reducers

52. Webpack 2 Tree
Shaking
Webpack 2 enables direct ES6 imports
and Tree Shaking dead code
elimination

53. Critical Path CSS
Universal (Isomorphic) Apps may
benefit from isomorphic-style-loader
that handles critical path CSS
automatically

54. Beware of CSS
Scope Creep
Use one CSS file for one Component
to avoid inclusion of unnecessary CSS
when using Style or Isomorphic Style
loader

57. theme.scss combined.scss
component.js
bundle.js
CSS
Scope
Creep

58. theme.scss comp.scss
component.js
bundle.js
Minimal
CSS
Scope

61. Use SCSS Placeholder
Selectors
Placeholder selectors (%mySelector)
will be compiled only when extended.
This greatly improves CSS scope when
importing SCSS files

62. React 0.14 vs 15.x
React 0.14 is faster in development,
but slower in production.
React 15.3.0 introduces
PureComponent.
Upgrade to 15.x if your app allows

63. Reach out! 🙌
moduscreate.com
@moduscreate
Grgur Grisogono
@ggrgur