How writing just one import the wrong way slows down your website
summary
A single import written the wrong way can pull an entire library into the client bundle: adding lodash via a default/ES-with-CommonJS mix increases the bundle by +24 KB in the measured build. The practical fixes shown are using per-method imports like import isString from "lodash/isString" or the ES build lodash-es, and tooling to verify impact — bundlephobia and the import-cost plugin for VS Code/IntelliJ — plus measuring before and after with your bundler (Webpack/Rollup).
AI-written summary · about
chapters (7)
- 0:00Introduction
- 1:13Tree shaking basics
- 6:13Import syntax mistake
- 8:42Bundle size impact
- 10:49Proper tree shaking
- 13:37Verify tree shakeability
- 14:42Key takeaways and conclusion
related talks
20mHow writing just one import the wrong way slows down your website
32mThe Importance of import and export
23mStreamline your code with webpack
45mDark Art of Webpack Bundle Tuning
08mHow to Reduce Your Vue Bundle Size With Webpack
38mLook Before You Import: A Webpack Survival Guide
52m10KB or Bust: The Delicate Power of Webpack and Babel
58m10KB or Bust: The Delicate Power of Webpack and Babel