Tree Shaking - Optimization Tutorials

What is Tree Shaking?

Tree shaking is a live-dead code removal algorithm used in JavaScript bundlers. It analyzes module dependencies at build time and eliminates dead code. The name comes from the visual effect of branches (unused code) falling off a tree.

Live Code

Dead Code

How Tree Shaking Works

1. Static Analysis

The bundler analyzes your code's structure and dependencies without actually executing it.


import { calculate } from './math';

2. Dead Code Removal

The bundler identifies and removes code that isn't used at all.


// Will be removed
export function unused() {
  return 42;
}

3. Bundle Optimization

The final bundle contains ONLY the code actually used in your application.

Production Bundle

Before & After

Original


export function add(a, b) { return a + b; }
export function subtract(a, b) { return a - b; }
export function multiply(a, b) { return a * b; }

Tree Shaken


export function add(a, b) { return a + b; }