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.
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
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
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