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

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

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

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

Контент

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

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

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

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

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

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

**Tree shaking** - це процес **видалення невикористаного коду** з фінального JavaScript-бандла.
Назва дослівно перекладається як **"струшування дерева"** -
уяви, що код твого проєкту - це дерево,
а зайві, "мертві" гілки (функції, модулі, імпорти) просто відпадають при збірці.

Менше коду -> швидше завантаження -> краща продуктивність.

## Ідея в двох словах

> Якщо якась функція, змінна чи імпорт **ніде не використовується**,
> збирач (наприклад, Webpack, Rollup, Vite) **видалить** цей код з підсумкового файлу.

## Приклад без tree shaking

```javascript
// utils.js
export function add(a, b) { return a + b; }
export function sub(a, b) { return a - b; }
export function mul(a, b) { return a * b; }
export function div(a, b) { return a / b; }

// main.js
import { add } from './utils.js';

console.log(add(2, 3));
```

Без tree shaking збирач включить **усі функції** (`add`, `sub`, `mul`, `div`) у `bundle.js`,
навіть якщо реально використовується лише `add()`.

## З tree shaking

З увімкненим tree shaking (наприклад, у **production-режимі Webpack**, Rollup чи Vite)
у підсумковому бандлі залишиться лише те, що дійсно використовується - `add()`.

У результаті:

- розмір бандла менший,
- завантаження швидше,
- парсинг і виконання коду - швидші.

## Як це працює технічно

Tree shaking базується на:

1. **ES Modules (ESM)** - `import` / `export`
(на відміну від `require`, ESM-імпорти статичні й аналізуються на етапі збірки);
2. **статичному аналізі залежностей** - збирач знає, які експорти реально використовуються;
3. **видаленні "мертвого коду"** за допомогою оптимізації **"dead code elimination"**.

Приклад:

```javascript
// імпорт статичний -> збирач бачить, що використовується лише add
import { add } from './utils.js';
```

А от CommonJS (`require`) **не підтримує tree shaking**:

```javascript
const utils = require('./utils'); // збирач не може точно знати, що використовується
```

## Коли tree shaking не спрацює

Tree shaking **не працює**, якщо:

- використовуєш **CommonJS (**`require`**)** замість ES Modules (`import/export`);
- код **має побічні ефекти** (наприклад, виконується під час імпорту);
- бібліотека не вказала `"sideEffects": false` у `package.json`;
- ти пишеш динамічні імпорти або звертаєшся до властивостей через змінні.

Приклад з побічним ефектом:

```javascript
// side.js
console.log("Цей код виконується при імпорті!");
export const x = 42;
```

Навіть якщо `x` не використовується, весь файл не видалиться -
бо при імпорті відбувається `console.log()`, тобто побічний ефект.

## Налаштування у Webpack / Vite / Rollup

### Webpack

Tree shaking вмикається автоматично в **production-режимі**,
якщо в `package.json` є:

```javascript
{
  "sideEffects": false
}
```

(або список файлів, у яких побічні ефекти є)

### Rollup

Tree shaking увімкнено за замовчуванням.
Rollup історично був першим збирачем, який це впровадив.

### Vite / ESBuild

Працює з коробки, оскільки базується на ESM і Rollup.

## Приклад результату

До оптимізації:

```javascript
bundle.js - 120 KB
```

Після tree shaking:

```javascript
bundle.js - 42 KB
```

## Підсумок

| Пункт | Опис |
| --- | --- |
| Що робить | Видаляє невикористаний код з підсумкового бандла |
| Базується на | ESM (`import/export`) і статичному аналізі |
| Працює в | Webpack, Rollup, Vite, Parcel |
| Не працює з | `require()`, побічними ефектами |
| Мета | Зменшити розмір і пришвидшити завантаження |

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

Для рев’юера

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

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