Що робить "tree shaking"?

JavaScriptJunior~2 хв читання

Що таке 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 базується на:

ES Modules (ESM) - import / export (на відміну від require, ESM-імпорти статичні й аналізуються на етапі збірки);
статичному аналізі залежностей - збирач знає, які експорти реально використовуються;
видаленні "мертвого коду" за допомогою оптимізації "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
}

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

bundle.js - 120 KB

Після tree shaking:

javascript

bundle.js - 42 KB

Підсумок

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

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Що робить "tree shaking"?

Що таке Tree Shaking

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

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

З tree shaking

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

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

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

Webpack

Rollup

Vite / ESBuild

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

Підсумок

Коротка відповідь