Tree Shaking & Module Bundling Concepts

In modern JavaScript application deployment, shipping unused code to client browsers wastes bandwidth and increases memory overhead. Tree Shaking is a form of dead-code elimination that relies on the static structure of ES2015 module syntax (import/export) to automatically discard unused functions, classes, and variables during the build process.

1. The Tree Analogy

Imagine your application as a living tree:

• The trunk is your application's entry point (index.js).
• The branches are the libraries and module dependencies imported.
• The green leaves are the functions and utilities actually executed.
• The brown, dead leaves are unused exports.
• Tree Shaking shakes the tree so that all dead leaves fall off, leaving only the lean, living code in the final production bundle.

2. Why Tree Shaking Requires ES Modules (and Fails on CJS)

Because CommonJS is dynamic, bundlers cannot reliably predict which exports will be accessed:

In contrast, ES Modules are static:

3. The sideEffects Property in package.json

A common blocker for tree shaking is side effects—code that performs an action upon import even if none of its exports are used (e.g., modifying prototypes, executing global listeners, importing CSS):

If a bundler is unsure whether an unused module contains side effects, it must safely keep it. To inform bundlers that your package contains pure exports with no side effects, configure package.json:

Or specify an array of files that do contain side effects (like CSS):

4. Best Practices for Tree-Shakeable Code

1. 1
   Avoid Barrel Re-Export Bloat: Do not export entire monolithic objects (export default { add, sub, mult }). Use named exports (export const add = ...).
2. 2
   Avoid Class Method Monoliths: Large classes with 50 methods cannot be partially tree-shaken if the class itself is instantiated. Prefer discrete functional exports.
3. 3
   Configure Babel / TS Target to Preserve Modules: Ensure TypeScript or Babel does not transpile import/export into CommonJS require() before the bundler runs!