Tree Shaking

1. Introduction

Tree Shaking is a term used in the JavaScript ecosystem to describe dead-code elimination. It relies on the static structure of ES Modules (import and export statements) to analyze code and exclude unused modules from the final production bundle.

2. Why It Matters

Loading large utility libraries (like Lodash or Three.js) can significantly increase your bundle size. If you only use one or two functions from a large library, tree shaking allows your build tools to strip out the unused code, keeping bundle sizes small and improving load times.

3. Real-World Analogy

Think of a Fruit Tree in Autumn:

• Legacy Bundling (Shipping the whole tree): To deliver apples to the store, you pack the entire tree—including the trunk, soil, branches, and dead leaves—into a massive container. The shipping cost is high.
• Tree Shaking (Shaking the branches): You grab the trunk and shake the tree vigorously (static analysis). The dead leaves and branches fall off, leaving only the active fruit behind. You only pack and ship the fruit, saving shipping costs.

4. How Tree Shaking Works

Tree shaking is performed by bundlers (like Rollup, Webpack, or Vite) during the build process:
1. The bundler analyzes the import and export statements statically, building a dependency graph.
2. It traces which functions are actually called in your code.
3. Unused exports are marked as "dead code" and omitted from the compiled bundle.

During compilation, the bundler identifies that subtract() is never imported or called, and strips it out of the production bundle.

5. Common Blockers: Side Effects

A side effect is code that performs an operation outside its local scope (such as modifying global variables, adding event listeners, or writing to the console) when the file is loaded.
If a module has side effects, bundlers cannot safely remove it during tree shaking, even if none of its functions are called, because doing so could break application behavior:

6. Practical Example

This package configuration demonstrates flagging a module as side-effect free, allowing bundlers to safely shake it:

7. Common Mistakes

• Trying to tree-shake CommonJS modules: Because CommonJS module exports are evaluated dynamically at runtime, bundlers cannot analyze exports statically, which makes tree shaking impossible. Always use ES Modules to support tree shaking.
• Importing from monolithic files: Importing values from files that export large, complex objects (e.g. export default { a, b, c }) prevents tree shaking because the bundler must include the entire object in the bundle. Use named exports instead.

8. Quick Quiz

9. Scenario-Based Challenge

10. Debugging Exercise

// math.js
export default {
  add(a,b) { return a+b; },
  multiply(a,b) { return a*b; }
};

// app.js
import MathMethods from './math.js';
console.log(MathMethods.add(1, 2)); // multiply is still included in bundle! Why?

// math.js
export function add(a, b) { return a + b; }
export function multiply(a, b) { return a * b; }

// app.js
import { add } from './math.js'; // multiply is successfully stripped out!

11. Interview Questions

12. Production Considerations

• • Configure sideEffects: Flag side-effect free files in your project's package.json file using "sideEffects": false. This allows bundlers to safely strip out unused files during compilation, reducing bundle size.