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