Tree Shaking: Eliminate Dead Code from Your Bundle
Tree shaking is a build-time optimization where bundlers (Webpack, Vite, Rollup) automatically remove unused exports from your JavaScript bundles. It relies on static analysis of ES6 module syntax and proper configuration to maximize reduction in bundle size.
You tell the packer exactly what you need (named imports). The packer looks at your list and only puts those items in the suitcase. Anything you didn't explicitly ask for (unused exports) gets left behind — saving space and weight.
1How Tree Shaking Works
Bundlers perform static analysis on ES6 import/export syntax to determine which exports are used. Unused code is eliminated during the build process.
export function add(a: number, b: number) { return a + b; }
export function subtract(a: number, b: number) { return a - b; }
// Only add is imported → subtract is removed2Writing Tree-Shakeable Code
Use ES modules, named exports, avoid side effects, and prefer libraries designed for tree shaking (lodash-es, date-fns).
3Package Configuration
Mark packages as side-effect-free with `"sideEffects": false` in package.json. Use the `module` or `exports` field for modern bundlers.
4Verification
Use webpack-bundle-analyzer or Vite's visualizer to inspect what actually ends up in your final bundle.
| Property | Tree-Shakeable | Not Tree-Shakeable |
|---|---|---|
| Imports | Named ES6 imports | Default / require() / import * |
| Libraries | lodash-es, date-fns | lodash, moment.js |
| SideEffects | "sideEffects": false | Side effects present |
| Bundle Impact | Minimal (only used code) | Large (entire library) |
Tree-Shakeable
Imports
Named ES6 imports
Libraries
lodash-es, date-fns
SideEffects
"sideEffects": false
Bundle Impact
Minimal (only used code)
Not Tree-Shakeable
Imports
Default / require() / import *
Libraries
lodash, moment.js
SideEffects
Side effects present
Bundle Impact
Large (entire library)
Common questions
- ›“What is tree shaking and how does it work?”
- ›“How do you make your code tree-shakeable?”
- ›“Why is lodash-es better than lodash?”
- ›“How do you verify tree shaking is working?”
What interviewers look for
- Understanding of ES modules vs CommonJS
- Knowledge of sideEffects and named exports
- Practical library choices and configuration
- Verification techniques (bundle analyzer)
Short answer (60 sec)
Tree shaking removes unused code at build time using static analysis of ES6 modules. Use named imports, avoid side effects, mark packages with sideEffects: false, and prefer tree-shakeable libraries like lodash-es.
Detailed answer (senior level)
Tree shaking depends on static analyzable ES6 syntax. Named exports and direct imports maximize reduction. Default exports and side effects prevent shaking. In practice, combine with dynamic imports for heavy features. Always validate with a bundle analyzer — assumptions about what gets removed are often wrong.
- Using default exports or import * as lib
- Including side effects in modules (console.log, CSS imports)
- Using non-tree-shakeable libraries (moment, full lodash)
- Barrel files that re-export everything
- Not checking bundle analyzer output
- ✓Tree shaking requires ES6 modules and named imports
- ✓Mark side-effect-free packages with "sideEffects": false
- ✓Prefer lodash-es, date-fns, and modular libraries
- ✓Use bundle analyzer to verify results regularly
- ✓Tree shaking is most effective when combined with code splitting
- ✓Write code with bundle size in mind from the start
Related web fundamentals topics
Continue with closely related browser and frontend engineering concepts.