What is "tree shaking"?

JavaScriptJunior~2 min read

What Tree Shaking is

Tree shaking is the process of removing "dead" (unused) code at the JavaScript application's build stage.

The term comes from the metaphor of:

"shaking the tree of code to drop the dead leaves"

The bundler analyzes dependencies and keeps only the functions, classes and variables that are actually used.

Example before and after

math.js

javascript

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

export function multiply(a, b) {
  return a * b;
}

export function subtract(a, b) {
  return a - b;
}

app.js

javascript

import { add } from './math.js';

console.log(add(2, 3));

After tree shaking, the final bundle keeps only the add function, while multiply and subtract are removed as "unused".

How it works

Tree shaking only works with ES6 modules (ESM) - that is, with import / export, not with require().

The reason: ESM has static dependency analysis, meaning the bundler knows in advance which modules and functions are used, unlike the dynamic require() in CommonJS.

Example of static analysis

javascript

import { add } from './math.js';

-> The bundler knows exactly: from math.js only add is needed. -> The other exported functions can be safely removed.

If you use CommonJS (require)

javascript

const math = require('./math.js');
console.log(math.add(2, 3));

Here math is an object that can change at runtime, so the bundler cannot safely remove multiply or subtract.

-> Tree shaking will not work.

What helps Tree Shaking work

Condition	Why it matters
Use `import` / `export`	Only these allow static analysis
A bundler that supports tree shaking	Webpack, Rollup, Vite, esbuild, etc.
Minification (Terser / SWC / esbuild)	Removes "dead" functions and variables
Set `"sideEffects": false` in `package.json`	Tells the bundler that an import has no side effects

Example package.json

javascript

{
  "name": "my-lib",
  "sideEffects": false
}

This means importing any file from the package is safe to remove if the result is unused.

"sideEffects" - an important point

Sometimes an import runs code "for its side effect", for example:

javascript

import './polyfill.js'; // runs code, but exports nothing

In this case you need to specify:

javascript

{
  "sideEffects": ["./polyfill.js"]
}

so the bundler does not remove it by mistake.

Where Tree Shaking is used

Tool	Support
Webpack	Yes, with `mode: "production"`
Rollup	Yes (it was originally created for this)
Vite	Yes (built on Rollup)
esbuild / SWC	Yes, built in

Example with Webpack

javascript

// webpack.config.js
module.exports = {
  mode: 'production', // enables tree shaking
  optimization: {
    usedExports: true
  }
};

How to check whether tree shaking works

Run the build (npm run build)
Open the generated JS file
Check whether unused functions remain (or use webpack-bundle-analyzer)

Summary

Parameter	Description
What it does	Removes unused code from the build
When it works	When using `import/export` and production mode
Goal	Reduce bundle size and speed up loading
Main requirement	The code must be "side-effect free"

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.