Successfully reported this slideshow.
Your SlideShare is downloading. ×

Webpack & React Performance in 16+ Steps

Ad

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

Ad

Grgur
Grisogono
2
Software Architect

@moduscreate

Ad

Performance = Speed

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Loading in …3
×

Check these out next

1 of 63 Ad
1 of 63 Ad

Webpack & React Performance in 16+ Steps

Download to read offline

Boosting performance for Webpack and React application. Steps to improve build speed and bundle size. Much of this applies to Angular, SASS, Less, and Javascript (ES6) overall.

Boosting performance for Webpack and React application. Steps to improve build speed and bundle size. Much of this applies to Angular, SASS, Less, and Javascript (ES6) overall.

Advertisement
Advertisement

More Related Content

Advertisement
Advertisement

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

×