Suggest an edit

Improve this article

Refine the answer for “What is "tree shaking"?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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

1. Run the build (`npm run build`)
2. Open the generated JS file
3. 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" |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts568 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.