The Art of Tree-Shaking
summary
Shows how Lucide Icons reduced app bundle size by making each of 1,400 icons its own ES module and building with Rollup for effective tree-shaking. Concrete techniques include setting sideEffects in package.json, splitting monolithic React components into many exported subcomponents, avoiding import * as and jsx dot notation that break static analysis, and using bundle visualizers to measure real savings (e.g., ~170 KB less JS parsing).
AI-written summary · about
chapters (11)
- 0:00Tree-shaking intro
- 1:30What tree-shaking is
- 3:40How bundlers work
- 5:53Requirements
- 7:37Maximizing tree-shaking
- 10:13Pitfalls
- 12:07Tree-shaking in React
- 13:28Advanced techniques
- 14:35Optimizing dependencies
- 15:21Verifying with analyzers
- 16:09Summary
related talks
16mThe art of tree-shaking
21mTree Shaking — Deploy Even Less Code to Production
32mLet's Tree-shake it...
28mMastering React Component Library Optimization
45mDark Art of Webpack Bundle Tuning
52m10KB or Bust: The Delicate Power of Webpack and Babel
22mOwning your Build-step – Owning your Code
23mStreamline your code with webpack