Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке tree shaking?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Tree shaking** - це техніка оптимізації збірки, за якої з підсумкового бандла видаляється невикористаний код; її підтримують сучасні збирачі, такі як Vite, Webpack, Rollup та esbuild. **Ключове:** вона працює завдяки статичним ES-модулям (import/export) і дозволяє зменшити розмір бандла та прискорити завантаження застосунку.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**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 - ні.**Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.