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

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

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.