Что такое tree shaking и как он работает?

Что такое tree shaking и как он работает?

Tree shaking — это техника оптимизации бундля, которая удаляет мёртвый код (dead code) из финального пакета JavaScript. Она работает путём анализа AST (Abstract Syntax Tree) и определения, какие экспорты из модулей никогда не используются в приложении. Это критично для уменьшения размера финального бандла и улучшения производительности.

Как работает tree shaking

1. Статический анализ кода: Tree shaking возможен благодаря ES6 модулям с их статической структурой:

// utils.js — экспортирует несколько функций
export function add(a, b) { return a + b; }
export function subtract(a, b) { return a - b; }
export function multiply(a, b) { return a * b; }

// app.js — импортирует и использует только одну
import { add } from './utils.js';
console.log(add(2, 3));

При сборке бундлер (webpack, Rollup, esbuild) проанализирует импорты и определит, что функции subtract и multiply не используются. Они будут удалены из финального бандла.

2. Процесс tree shaking:

Исходный код
    ↓
Парсинг в AST
    ↓
Анализ используемых экспортов
    ↓
Отмечивание неиспользуемого кода
    ↓
Удаление dead code
    ↓
Минификация
    ↓
Финальный бандл

Требования для tree shaking

ES6 модули обязательны:

// ✅ Работает с tree shaking
export const method = () => {};
import { method } from 'module';

// ❌ НЕ работает
module.exports = { method };
const { method } = require('module');

Tree shaking не работает с CommonJS, потому что CommonJS модули динамичны (можно требовать модули условно, в runtime и т.д.).

Side effects должны быть отмечены:

{
  "name": "my-library",
  "sideEffects": false,
  "main": "dist/index.js",
  "module": "dist/index.esm.js"
}

Если модуль имеет побочные эффекты (например, глобальные переменные, полифиллы), нужно указать их:

{
  "sideEffects": [
    "./src/polyfills.js",
    "./src/global.css"
  ]
}

Примеры tree shaking в популярных библиотеках

Lodash (без оптимизации):

import _ from 'lodash';
const result = _.map([1, 2, 3], x => x * 2);
// Весь lodash (~70KB) будет в бандле

Lodash-es (с tree shaking):

import { map } from 'lodash-es';
const result = map([1, 2, 3], x => x * 2);
// Только функция map (~5KB) будет в бандле

Material-UI:

// ✅ Работает с tree shaking
import Button from '@mui/material/Button';

// ❌ Импортирует весь модуль
import { Button } from '@mui/material';

Tree shaking в различных бундлерах

Webpack 4+:

// webpack.config.js
module.exports = {
  mode: 'production', // Автоматически включает tree shaking
  optimization: {
    usedExports: true,
    sideEffects: true,
  }
};

Rollup:

// rollup.config.js
export default {
  input: 'src/main.js',
  output: { file: 'dist/bundle.js', format: 'esm' },
  treeshake: true // По умолчанию включен
};

Vite/esbuild: Tree shaking включен по умолчанию при производственной сборке.

Практические советы

1. Используй именованные экспорты:

// ✅ Работает с tree shaking
export function formatDate() {}
export function parseDate() {}

// ❌ Сложнее для tree shaking
export default { formatDate, parseDate };

2. Выбирай библиотеки с поддержкой ES6 модулей:

{
  "main": "dist/index.cjs",
  "module": "dist/index.esm.js",
  "exports": {
    "import": "./dist/index.esm.js",
    "require": "./dist/index.cjs"
  }
}

3. Проверяй размер бандла:

npm install --save-dev webpack-bundle-analyzer

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [new BundleAnalyzerPlugin()]
};

4. Избегай динамических импортов для статичного анализа:

// ❌ Бундлер не может проанализировать
const moduleName = 'utils';
import(moduleName);

// ✅ Работает
import { add } from './utils';

Реальный пример

// lib.js
export const utilityA = () => 'A';
export const utilityB = () => 'B';
export const utilityC = () => 'C';

// app.js
import { utilityA } from './lib';
console.log(utilityA());

// Результат tree shaking:
// utilityB и utilityC удаляются из бандла
// Итоговый размер меньше на ~20-30%

Вывод: Tree shaking — это мощная техника оптимизации, которая автоматически удаляет неиспользуемый код. Для фронтенд-разработчика важно использовать ES6 модули, выбирать библиотеки с поддержкой tree shaking и проверять размер финального бандла с помощью специальных инструментов анализа.