Що таке "tree shaking"?

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

Що таке 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

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

Підсумок

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

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

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

Premium

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