Tree-shaking

Как это работает?

1. Анализ импортов/экспортов – сборщик (Webpack, Rollup, Vite) определяет, какие модули реально используются.
2. Удаление лишнего – код, который нигде не импортируется, исключается из бандла.

export function add(a, b) {
  return a + b;
}
export function subtract(a, b) {
  return a - b;
}

import { add } from "./math.js";
console.log(add(2, 3)); // 5

В результате сборки с tree-shaking в итоговом бандле останется только функция add, а subtract будет удалена, так как она не используется.

Tree Shaking делает бандлы меньше → сайты грузятся быстрее. Оптимизация особенно важна для больших проектов и библиотек.

Технические требования

• Работает только с ES-модулями (import/export)
• Требует поддержки сборщика:

Vite/Rollup дают лучший результат благодаря:

• Нативному ESM в dev-режиме
• Более точному анализу зависимостей
• Побочные эффекты (side effects) Код, изменяющий глобальное состояние, нельзя удалить:

// side-effect.js
window.myLib = {}; // Сборщик сохранит этот файл

• Асинхронные импорты

const module = await import(`./${name}.js`); // Не анализируется

Почему это важно?

Пример оптимизации библиотеки:

lodash (полная версия)  ~532 KB
lodash-es (с tree shaking) ~82 KB

Проверка tree-shaking