Webpack & React Performance in 16+ Steps

Webpack & React Performance in 16+ Steps

1. 1. Steps for Boosting React and Webpack Performance Grgur Grisogono @ggrgur 1 Modus Create @moduscreate 6bit.ly/reactpack-live
2. 2. Grgur Grisogono 2 Software Architect
 @moduscreate
3. 3. Performance = Speed
4. 4. What is Speed ?
5. 5. Who’s the consumer?
6. 6. End User Experience
7. 7. Bundle Size
8. 8. Developer Experience
9. 9. (Re)Build Speed
10. 10. Agenda Webpack perf React perf Babel perf
11. 11. Node Environment Avoid development code execution
12. 12. Node Environment Build Perf (Dev) Bundle Perf (Prod) ✔N/A
13. 13. SourceMaps Selection Choose the right SourceMap kind (devTool) for your build type
14. 14. SourceMaps Selection Build Perf (Dev) Bundle Perf (Prod) ✔✔
15. 15. UglifyJS Minify production source code. 
 Hint: React 15 doesn’t support IE8
16. 16. UglifyJS Build Perf (Dev) Bundle Perf (Prod) ✔✘
17. 17. ! UglifyJS • UglifyJS works great with GZIP • Also removes dead code • Preserves SourceMaps • Can be configure to remove @license comments • Avoid in development
18. 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. 19. identName Hashes Build Perf (Dev) Bundle Perf (Prod) ✔✘
20. 20. Disable Autoprefixer in development Autoprefixer adds vendor prefixes for CSS, but also adds build overhead
21. 21. Disable Autoprefixer in development Build Perf (Dev) Bundle Perf (DEV) ✔✔
22. 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. 23. CSS Loader v0.14.5 Build Perf (Dev) Bundle Perf (Prod) ✔ ?
24. 24. ! CSS Loader v0.14.5 • Much faster for CSS processing • Doesn’t use expensive dependencies (e.g. PostCSS) • Composition not available
25. 25. Parallelize build with HappyPack Multi-threading for Webpack Builds. Works with any loader (SCSS and LESS, too)
26. 26. Parallelize build with HappyPack Build Perf (Dev) Bundle Perf (Prod) ✔ N/A
27. 27. Create DLL bundles DLLs contain infrequently changed code (libraries) to avoid unneeded processing
28. 28. Create DLL bundles Build Perf (Dev) Bundle Perf (Prod) ✔ N/A
29. 29. ! Create DLL bundles • A way of caching • Avoid rebuilding of libraries • Not needed for production • Requires a custom DLL build config
30. 30. Code Splitting (Chunking) Separate application core from meaningful modules and load them on demand
31. 31. Code Splitting (Chunking) Route path Splitting API Chunk name
32. 32. Code Splitting (Chunking) Build Perf (Dev) Bundle Perf (Prod) ✔N/A 👁👁 *perceived performance
33. 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. 34. Import Dependencies Directly Instead of importing the entire bundle, import direct files where possible
35. 35. Import Dependencies Directly Build Perf (Dev) Bundle Perf (Prod) ✔✔
36. 36. ! Import Dependencies Directly • Poor man’s dead code elimination • Improves code splitting
37. 37. Export Only What You Need Exports create overhead and increase bundle size
38. 38. Export Only What You Need Build Perf (Dev) Bundle Perf (Prod) ✔N/A
39. 39. React Optimizations in Babel Config Remove unneeded React code in Prod
40. 40. React Optimizations in Babel Config Build Perf (Dev) Bundle Perf (Prod) ✔✘
41. 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. 42. Use PureComponent Extend React.PureComponent to minimize render() execution count (requires React ^15.3.0)
43. 43. ! Use PureComponent • Render only when properties or state has changed • Replaces shallow- compare add-on • Beware of nested state objects
44. 44. Don’t Assign JSX to Variables Use Functional (Stateless) Components instead to minimize render count Bad
45. 45. Avoid Large JSX Blocks Use Functional (Stateless) Components instead to minimize render count and keep code maintainable
46. 46. Normalize State Deeply nested objects (e.g. API) should be flattened to ensure efficient state processing https://github.com/paularmstrong/normalizr
47. 47. Use Memoized Selectors (Reselect) Compute (and memoize) derived data to minimize Redux state. https://github.com/reactjs/reselect
48. 48. Keep Redux Action Names Short Constant string names do not have to be long. They cannot be minified.
49. 49. Bonus Tips
50. 50. Use Node v6.x Up to 30% faster with Webpack and Server Side Rendering
51. 51. Enable HMR Don’t forget Hot Module Replacement for React components and Redux reducers
52. 52. Webpack 2 Tree Shaking Webpack 2 enables direct ES6 imports and Tree Shaking dead code elimination
53. 53. Critical Path CSS Universal (Isomorphic) Apps may benefit from isomorphic-style-loader that handles critical path CSS automatically
54. 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
55. 55. theme.scss combined.scss component.js bundle.js CSS Scope Creep
56. 56. theme.scss comp.scss component.js bundle.js Minimal CSS Scope
57. 57. Use SCSS Placeholder Selectors Placeholder selectors (%mySelector) will be compiled only when extended. This greatly improves CSS scope when importing SCSS files
58. 58. 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
59. 59. Reach out! 🙌 moduscreate.com @moduscreate Grgur Grisogono @ggrgur