Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке "tree shaking"?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Що таке *Tree Shaking*

> **Tree shaking** - це процес **видалення "мертвого" (невикористовуваного) коду** на етапі збірки JavaScript-застосунку.

Термін походить від метафори:

> "струсити дерево коду і скинути мертве листя"

Тобто збирач **аналізує залежності** і **залишає лише ті функції, класи і змінні, які справді використовуються**.

## Приклад до і після

### `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));
```

Після **tree shaking** у фінальному бандлі залишиться **лише функція** `add`,
а `multiply` і `subtract` - **видаляться**, як "невикористовувані".

## Як це працює

Tree shaking працює **лише з модулями ES6 (ESM)**,
тобто з `import` / `export`, а не з `require()`.

Причина:
ESM має **статичний аналіз залежностей**,
тобто збирач *заздалегідь знає*, які модулі і функції використовуються,
на відміну від динамічного `require()` у CommonJS.

## Приклад статичного аналізу

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

Збирач точно знає: з `math.js` потрібна **лише** `add`.
Решту експортованих функцій можна безпечно видалити.

## Якщо використовувати CommonJS (`require`)

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

Тут `math` - об'єкт, який **може змінюватись під час виконання**,
тому збирач **не може безпечно видалити** `multiply` або `subtract`.

Tree shaking **не спрацює**.

## Що допомагає Tree Shaking працювати

| Умова | Чому важливо |
| --- | --- |
| Використовувати `import` / `export` | Лише вони дозволяють статичний аналіз |
| Збирач з підтримкою tree shaking | Webpack, Rollup, Vite, esbuild та ін. |
| Мінифікація (Terser / SWC / esbuild) | Видаляє "мертві" функції і змінні |
| Вказувати `"sideEffects": false` у `package.json` | Повідомляє збирачу, що імпорт не викликає побічних ефектів |

## Приклад `package.json`

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

Це означає, що імпорт будь-якого файлу з пакета **безпечний для видалення**,
якщо результат не використовується.

## "sideEffects" - важливий момент

Іноді імпорт виконує код "заради ефекту", наприклад:

```javascript
import './polyfill.js'; // виконує код, але нічого не експортує
```

У цьому випадку потрібно вказати:

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

щоб збирач **не видалив його помилково**.

## Де використовується Tree Shaking

| Інструмент | Підтримка |
| --- | --- |
| **Webpack** | Так, з `mode: "production"` |
| **Rollup** | Так (спочатку був створений саме для цього) |
| **Vite** | Так (на базі Rollup) |
| **esbuild / SWC** | Так, вбудовано |

## Приклад з Webpack

```javascript
// webpack.config.js
module.exports = {
  mode: 'production', // вмикає tree shaking
  optimization: {
    usedExports: true
  }
};
```

## Як перевірити, чи працює tree shaking

1. Запусти збірку (`npm run build`)
2. Відкрий згенерований JS-файл
3. Перевір, чи залишились невикористовувані функції
(або використай `webpack-bundle-analyzer`)

## Підсумок

| Параметр | Опис |
| --- | --- |
| **Що робить** | Видаляє невикористовуваний код зі збірки |
| **Коли працює** | При використанні `import/export` і production-режиму |
| **Мета** | Зменшити розмір бандла і прискорити завантаження |
| **Головна умова** | Код повинен бути "side-effect free" |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати510 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.