What is "tree shaking"?

JavaScriptJunior~2 min read

What Tree Shaking is

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

The term comes from the metaphor:

"shake the code tree and drop the dead leaves"

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

An 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, only the add function will remain in the final bundle, while multiply and subtract will be removed as "unused".

How it works

Tree shaking works only 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.

An example of static analysis

javascript

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

The bundler knows exactly: only add is needed from math.js. The rest of the 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 with tree shaking support	Webpack, Rollup, Vite, esbuild, etc.
Minification (Terser / SWC / esbuild)	Removes "dead" functions and variables
Setting `"sideEffects": false` in `package.json`	Tells the bundler that importing has no side effects

An 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 the 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

An example with Webpack

javascript

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

How to check whether tree shaking is working

Run the build (npm run build)
Open the generated JS file
Check whether any 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.