Web Development

What is Tree Shaking?

Dead-code elimination performed by bundlers, which drops unused exports from the final JavaScript bundle.

Definition

Tree shaking removes code that is imported but never used, relying on the static structure of ES modules—import and export are analyzable at build time, unlike dynamic CommonJS require calls. Rollup pioneered the technique; Webpack, esbuild, and Vite all implement it. Effectiveness depends on library design: named exports from ESM packages shake well, while side-effectful modules block elimination, which is why package.json's "sideEffects": false flag matters. Classic win: importing one function from lodash-es costs kilobytes, while require('lodash') drags in the whole library. Bundle analyzers verify what actually got dropped.

More in Web Development

Keep the references coming

One email a week: new and trending developer tools, fresh comparisons, and what shipped. Unsubscribe in one click.