How writing just one import the wrong way slows down your website
summary
Modern bundlers rely on tree shaking but one wrong import can pull an entire library into the bundle: importing lodash the ES module way here unexpectedly adds ~24 KB because lodash exports CommonJS, while cherry‑picking like lodash/isString reduces that to 0.21 KB. Measured bundle before/after confirms the delta. Use tools like the import-cost editor plugin and BundlePhobia to estimate impact and verify that the optimized import pattern actually keeps bundles small.
AI-written summary · about
chapters (8)
- 0:00Introduction
- 1:26Tree shaking importance
- 4:18Bundlers and bundle size
- 8:11Tree shaking myths
- 11:23Lodash import pitfalls
- 13:10Verifying tree shaking
- 15:19Real-world impact
- 16:44Conclusion and Q&A session
related talks
16mHow writing just one import the wrong way slows down your website
32mLet's Tree-shake it...
21mTree Shaking — Deploy Even Less Code to Production
52m10KB or Bust: The Delicate Power of Webpack and Babel
45mDark Art of Webpack Bundle Tuning
58m10KB or Bust: The Delicate Power of Webpack and Babel
15mThe Superpower of ASTs: How We Saved 16% on Our Bundle Size
23mStreamline your code with webpack