Skip to main content

Що таке tree shaking?

VueJunior~2 хв читання
Запропонувати правку

Tree shaking - це техніка оптимізації збірки, за якої з підсумкового бандла видаляється невикористаний код. Її підтримують сучасні збирачі: Vite, Webpack, Rollup, esbuild.

Простіше кажучи:

Tree shaking = "струшування дерева імпортів", щоб залишити тільки те, що реально використовується.

Назва метафорична: наче "струшуємо дерево" і непотрібні листочки (функції/модулі) відпадають.

Навіщо потрібен tree shaking?

Щоб зменшити:

  • розмір фінального JS-бандла
  • час завантаження застосунку
  • час парсингу і виконання JS
  • TTI (Time To Interactive)

Tree shaking - одна з ключових оптимізацій у сучасних SPA (Vue, React, Svelte).

Як працює tree shaking?

Tree shaking можливий завдяки двом речам:

1. Використання ES modules (ESM)

js
import { fn } from './utils.js'

ESM-імпорти статичні, їх можна аналізувати на етапі збірки. Збирач розуміє, що:

  • які функції імпортуються
  • які ні
  • який код "мертвий"

2. Аналіз залежностей (dead code elimination)

Збирач розпізнає код, який не використовується:

js
export function usedFn() { ... } export function unusedFn() { ... }

Якщо unusedFn() ніде не імпортується, вона повністю видаляється зі збірки.

Приклад з Vue

У Vue 3:

js
import { ref, reactive, computed } from 'vue'

Якщо ви не використовуєте reactive, збирач:

  • НЕ включить reactive у бандл
  • залишить тільки ref і computed

Це стало можливим у Vue 3 завдяки повністю modular-friendly структурі.

Vue 2 так робити не міг.

Де tree shaking особливо корисний?

1. У великих UI-бібліотеках

Наприклад:

js
import { ElButton, ElTable } from 'element-plus'

Збирач включить тільки компоненти, які реально використовуються.

2. При імпорті utility-функцій

Наприклад Lodash у вигляді lodash-es:

js
import { debounce } from 'lodash-es'

Збирач включить тільки debounce, а не весь Lodash.

3. У великих проєктах на Vue + Vite/Webpack

ESM + оптимізація модулів -> бандл зменшується в рази.

Важливі умови для tree shaking (питають на співбесіді)

Щоб tree shaking працював, потрібно:

Використовувати ESM (import/export), а не CommonJS (require, module.exports)

Webpack, Rollup, Vite не вміють коректно робити tree shaking для CommonJS.

Не використовувати динамічні імпорти у вигляді змінних

Погано:

js
const name = 'module' import(`./${name}.js`)

Збирач не може аналізувати такі імпорти.

Не використовувати side effects (побічні ефекти)

Якщо модуль має побічні ефекти при імпорті:

js
console.log('I run when imported!')

він не може бути видалений.

Підсумок (ідеально для співбесіди)

Tree shaking - це процес видалення невикористаного коду на етапі збірки. Заснований на статичному аналізі ES-модулів. Дозволяє зменшити розмір бандла і прискорити завантаження застосунку. Vue 3 повністю підтримує tree shaking, Vue 2 - ні.

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

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

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

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