QUESTION: Що таке tree shaking?

Одним з найважливіших завдань при оптимізації сучасних вебдодатків є зменшення об'єму переданого мережею JavaScript-коду. Для досягнення цієї цілі використовується технологія tree shaking, назву якої можна образно перекласти як «потрушування дерева» для того, щоб скинути сухі, непотрібні листки. Суть цього процесу полягає в автоматичному видаленні невикористовуваного коду з підсумкового файлу збирання. Наприклад, якщо ви підключаєте велику бібліотеку утиліт на зразок lodash-es, але використовуєте з неї всього одну функцію, tree shaking гарантує, що у фінальний продукт потрапить тільки ця єдина функція, а весь інший масив невикористовуваного коду буде відкинутий.

Технологія tree shaking нерозривно пов'язана з використанням ES модулів. Оскільки ES модулі мають статичну структуру імпорту та експорту, інструменти збирання можуть точно проаналізувати граф залежностей ще до запуску коду. Збиральник бачить, які саме сутності імпортуються з модуля, а які залишаються незатребуваними, що робить можливим безпечне видалення «зайвого». Без статичного аналізу, притаманного ES модулям (наприклад, у динамічному CommonJS), таке агресивне видалення коду було б технічно неможливим, оскільки функції могли б викликатися динамічно за рядковими іменами.

Для того щоб інструменти збирання коректно застосовували цю оптимізацію до сторонніх бібліотек, розробники пакетів використовують спеціальну властивість sideEffects у файлі package.json. Якщо бібліотека вказує "sideEffects": false, це говорить збирачу про те, що всі модулі пакету чисті і не мають побічних ефектів при простому імпорті (наприклад, не змінюють глобальний об'єкт window і не виконують код автоматично при підключенні). Завдяки цьому збиральник може сміливо видаляти будь-які невикористовувані імпорти з цієї бібліотеки. Підсумком роботи tree shaking стає кардинальне зменшення розміру bundle, що прискорює завантаження сторінки і підвищує загальну продуктивність клієнтської частини додатка.