How Tree Shaking Eliminates Dead Code in Web Builds

Tree-shaking is a critical build-optimization technique that removes unused JavaScript code from your final production bundles. This article explains how tree-shaking works under the hood, why it relies on modern ES module syntax, how bundlers trace dependencies to detect dead code, and the crucial role of side-effect analysis in safely shrinking bundle sizes for faster web performance.

What Tree-Shaking Actually Is

Tree-shaking is a form of dead-code elimination (DCE). The metaphor comes from imagining your application's dependency structure as a living tree: the green leaves represent the functions, objects, and variables your application actively uses, while the dead, brown leaves represent unused exports. When a bundler shakes the tree, the dead leaves fall off, leaving only the essential code to be compiled into your production output.

The Foundation: ES Modules (ESM)

Traditional CommonJS module systems rely on dynamic imports, using require() calls that can happen conditionally or at runtime:

// CommonJS: Dynamic and difficult to analyze statically
if (condition) {
  const { calculateTotal } = require('./math');
}

Because CommonJS imports can depend on runtime state, bundlers cannot reliably predict which exports will be used without running the code.

Tree-shaking relies on modern ECMAScript Modules (import and export statements). ESM is static by design: imports and exports must be declared at the top level of a file. Because the dependency structure is fixed, modern build tools (such as Webpack, Rollup, Vite, and esbuild) can parse and analyze the module graph at compile time without executing a single line of code.

Step-by-Step: How Bundlers Eliminate Dead Code

1. Abstract Syntax Tree (AST) Generation

When the build process starts, the bundler parses every source file into an Abstract Syntax Tree (AST). The AST maps out the syntactic structure of your program, identifying every declared export and import statement.

2. Dependency Graph Construction

Starting from designated entry points (such as index.js), the bundler traces all imported modules and constructs a unified dependency graph. It marks which exports are imported directly or indirectly by other active parts of the codebase.

3. Marking Unused Exports

Any function, class, or variable that is exported by a module but never imported by any reachable module in the graph is flagged as unused. For example:

// utilities.js
export function formatDate() { /* used */ }
export function calculateTax() { /* unused */ }

If your application only imports formatDate, the bundler marks calculateTax as dead code.

4. Minification and Dropping

Bundlers typically work alongside minifiers such as Terser or esbuild. Once the bundler marks an export as unused, it modifies the AST or rewrites the module code so that the unused export becomes an unreferenced local variable or is stripped entirely. The minifier then recognizes the dangling code and removes it from the final compiled bundle.

The Role of Side Effects

A common blocker for tree-shaking is "side effects." A side effect occurs when a piece of code performs an action that modifies state outside its own scope when executed—such as modifying a global variable, setting a timer, or mutating a prototype:

// Module with a side effect
window.analyticsLoaded = true;

export function trackEvent() { /* ... */ }

Even if trackEvent is never imported, the bundler may keep the entire module to avoid breaking the execution of window.analyticsLoaded = true.

To bypass this limitation, developers and package authors can declare "sideEffects": false in their project's package.json, or provide an array of specific files that contain side effects. This explicitly tells the bundler that it is safe to prune any unused export from the module without worrying about unintended runtime consequences.

Why It Matters for Production

Eliminating dead code directly improves performance metrics across modern web applications:

  • Smaller Download Sizes: Less JavaScript over the wire reduces Time to First Byte (TTFB) impact and speeds up asset delivery, especially on mobile networks.
  • Faster Parse and Compile Times: Browsers must parse and compile all JavaScript before executing it. Removing dead code lightens the CPU workload, leading to faster First Contentful Paint (FCP) and lower Interaction to Next Paint (INP) scores.
  • Safer Dependency Management: Developers can import single utilities from large libraries (such as lodash-es) without incurring the payload cost of the entire library.