Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Steps for
Boosting React
and Webpack
Performance
Grgur Grisogono
@ggrgur
1
Modus Create
@moduscreate
6bit.ly/reactpack-live
Grgur
Grisogono
2
Software Architect

@moduscreate
Performance = Speed
What is Speed
?
Who’s the consumer?
End User Experience
Bundle
Size
Developer Experience
(Re)Build
Speed
Agenda
Webpack perf
React perf
Babel perf
Node
Environment
Avoid development code execution
Node
Environment
Build Perf (Dev) Bundle Perf (Prod)
✔N/A
SourceMaps
Selection
Choose the right SourceMap kind
(devTool) for your build type
SourceMaps
Selection
Build Perf (Dev) Bundle Perf (Prod)
✔✔
UglifyJS
Minify production source code. 

Hint: React 15 doesn’t support IE8
UglifyJS
Build Perf (Dev) Bundle Perf (Prod)
✔✘
!
UglifyJS • UglifyJS works great with
GZIP
• Also removes dead code
• Preserves SourceMaps
• Can be configure to
remove @l...
identName Hashes
(CSS Modules, Chunk names)
Hash name generation is best used in
prod. Descriptive names in dev.
https://g...
identName Hashes
Build Perf (Dev) Bundle Perf (Prod)
✔✘
Disable Autoprefixer
in development
Autoprefixer adds vendor prefixes for
CSS, but also adds build overhead
Disable Autoprefixer in
development
Build Perf (Dev) Bundle Perf (DEV)
✔✔
CSS Loader v0.14.5
This older version of CSS loader is
much faster at processing CSS (but it
doesn’t support all features ...
CSS Loader v0.14.5
Build Perf (Dev) Bundle Perf (Prod)
✔ ?
!
CSS
Loader
v0.14.5
• Much faster for CSS
processing
• Doesn’t use expensive
dependencies (e.g.
PostCSS)
• Composition no...
Parallelize build with
HappyPack
Multi-threading for Webpack Builds.
Works with any loader (SCSS and
LESS, too)
Parallelize build with
HappyPack
Build Perf (Dev) Bundle Perf (Prod)
✔ N/A
Create DLL bundles
DLLs contain infrequently changed
code (libraries) to avoid unneeded
processing
Create DLL bundles
Build Perf (Dev) Bundle Perf (Prod)
✔ N/A
!
Create
DLL
bundles
• A way of caching
• Avoid rebuilding of
libraries
• Not needed for production
• Requires a custom DL...
Code Splitting
(Chunking)
Separate application core from
meaningful modules and load them on
demand
Code Splitting
(Chunking)
Route path
Splitting API
Chunk name
Code Splitting
(Chunking)
Build Perf (Dev) Bundle Perf (Prod)
✔N/A
👁👁
*perceived performance
!
Code
Splitting
(Chunking)
• Automatic code splitting
based on require rules
• Asynchronous
• Work great with React
Route...
Import Dependencies
Directly
Instead of importing the entire bundle,
import direct files where possible
Import Dependencies
Directly
Build Perf (Dev) Bundle Perf (Prod)
✔✔
!
Import
Dependencies
Directly
• Poor man’s dead code
elimination
• Improves code splitting
Export Only What You
Need
Exports create overhead and increase
bundle size
Export Only What You
Need
Build Perf (Dev) Bundle Perf (Prod)
✔N/A
React Optimizations
in Babel Config
Remove unneeded React code in Prod
React Optimizations in
Babel Config
Build Perf (Dev) Bundle Perf (Prod)
✔✘
#1 React Perf Tip
The key to all React performance is
avoiding wasteful CPU cycles.
Most frequently this means optimizing
...
Use PureComponent
Extend React.PureComponent to
minimize render() execution count
(requires React ^15.3.0)
!
Use
PureComponent
• Render only when
properties or state has
changed
• Replaces shallow-
compare add-on
• Beware of nest...
Don’t Assign JSX to
Variables
Use Functional (Stateless)
Components instead to minimize
render count
Bad
Avoid Large JSX
Blocks
Use Functional (Stateless)
Components instead to minimize
render count and keep code
maintainable
Normalize State
Deeply nested objects (e.g. API)
should be flattened to ensure efficient
state processing
https://github.c...
Use Memoized
Selectors (Reselect)
Compute (and memoize) derived data
to minimize Redux state.
https://github.com/reactjs/r...
Keep Redux Action
Names Short
Constant string names do not have to
be long. They cannot be minified.
Bonus Tips
Use Node v6.x
Up to 30% faster with Webpack and
Server Side Rendering
Enable HMR
Don’t forget Hot Module Replacement
for React components and Redux
reducers
Webpack 2 Tree
Shaking
Webpack 2 enables direct ES6 imports
and Tree Shaking dead code
elimination
Critical Path CSS
Universal (Isomorphic) Apps may
benefit from isomorphic-style-loader
that handles critical path CSS
auto...
Beware of CSS
Scope Creep
Use one CSS file for one Component
to avoid inclusion of unnecessary CSS
when using Style or Iso...
theme.scss combined.scss
component.js
bundle.js
CSS
Scope
Creep
theme.scss comp.scss
component.js
bundle.js
Minimal
CSS
Scope
Use SCSS Placeholder
Selectors
Placeholder selectors (%mySelector)
will be compiled only when extended.
This greatly impro...
React 0.14 vs 15.x
React 0.14 is faster in development,
but slower in production.
React 15.3.0 introduces
PureComponent.
U...
Reach out! 🙌
moduscreate.com
@moduscreate
Grgur Grisogono
@ggrgur
Webpack & React Performance in 16+ Steps
Webpack & React Performance in 16+ Steps
Webpack & React Performance in 16+ Steps
Webpack & React Performance in 16+ Steps
Upcoming SlideShare
Loading in …5
×

Webpack & React Performance in 16+ Steps

3,859 views

Published on

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.

Published in: Software

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

×