treeshaking

Treeshaking is an optimization technique used by JavaScript bundlers to remove code that is not reachable or not used in the final bundle. It analyzes import and export statements and the module graph to determine which exports are actually consumed by the application and eliminates the rest, reducing bundle size and improving load times.

How it works: The bundler builds a graph of modules and their dependencies, then uses static analysis of ES modules to identify which exports are reachable from entry points. Unused exports and dead branches of code can be dropped. Safe elimination generally requires that modules have no side effects upon import; metadata such as the sideEffects field in package.json can signal whether a module can be shaken without changing behavior.

Side effects and metadata: Code that runs when a module is imported (side effects) can complicate shaking, because removing the module could alter application behavior. If a library marks itself as sideEffects: false (or uses explicit annotations), bundlers are more likely to remove unused code. Some tools also support pure annotations or pragmas to help identify removable expressions, but such hints are optional and not universally relied upon.

Tooling and limitations: Rollup is known for strong treeshaking of ES modules, especially for libraries. Webpack added and improved tree shaking in v2–v4, with ongoing enhancements in newer versions. Faster tools like esbuild and SWC offer tree shaking with high performance. Limitations include dynamic imports, dynamic property access, re-exports, and libraries with startup side effects, which can prevent complete elimination. In practice, treeshaking is most effective when code uses standard ES modules and libraries clearly signaling safe side effects.

Impact: Treeshaking helps deliver smaller, faster-loading bundles for modern web applications, but requires awareness of module behavior and library metadata to maximize effectiveness.