tree shaking

Definitions

1. A build optimization that eliminates unused code (dead code) from JavaScript bundles by analyzing the dependency graph of ES module imports. Named metaphorically — shake the dependency tree and the dead (unused) branches fall out. Tree shaking requires ES module syntax (import/export) and is performed by bundlers like Rollup, Webpack, and esbuild.

   In plain English: Automatically removing unused code from your website's final files — like shaking a tree so dead branches fall off, making the bundle smaller.

   Example: Switching from lodash to lodash-es enabled tree shaking, which dropped our bundle size by 70KB because we were only using three functions from the entire library.

Related Terms

• Webpack
• Vite
• lazy loading
• code splitting
• Core Web Vitals
• Tree Shaking
• Static Dispatch