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

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

Допрацюйте відповідь до «Що таке "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 шорткати512 слів

Для рев’юера

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

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