Tree Shaking: что это, механизм удаления мёртвого кода и инструменты

Что такое Tree Shaking?

Tree Shaking (встряхивание дерева) — техника оптимизации кода, при которой из финального бандла исключаются модули и функции, не используемые в приложении. Термин введён командой Rollup в 2015 году и метафорически описывает процесс: дерево зависимостей встряхивается, и неиспользуемые ветки отпадают. В отличие от ручной оптимизации, Tree Shaking выполняется автоматически на этапе сборки.

Tree Shaking работает только с ES-модулями (ECMAScript Modules), где зависимости определяются статически через import и export. CommonJS (require/module.exports) не поддерживает Tree Shaking, потому что require выполняется динамически — сборщик не может заранее определить, какие функции реально используются. Современные библиотеки (Lodash, Moment.js, RxJS) выпускают ES-версии для поддержки Tree Shaking.

Rollup: пионер Tree Shaking

Rollup — первый сборщик, внедривший Tree Shaking в 2015 году. В отличие от Webpack, Rollup изначально проектировался для ES-модулей и выполняет более агрессивное удаление мёртвого кода. Rollup анализирует не только отдельные экспорты, но и целые модули: если модуль не имеет побочных эффектов и ни один экспорт не используется, Rollup исключает весь модуль из бандла.

Rollup особенно эффективен для библиотек и SDK, где каждый килобайт имеет значение. Фреймворк Vue.js использует Rollup для сборки production-версии. React перешёл на Rollup в 2020 году. Для приложений чаще используется Webpack из-за более богатой экосистемы плагинов (Hot Module Replacement, code splitting, CSS modules), но для максимального Tree Shaking при сборке библиотек Rollup остаётся стандартом индустрии.

Экономия от Tree Shaking сильно зависит от архитектуры проекта. В приложении на React с библиотекой Ant Design Tree Shaking может удалить до 70% кода UI-компонентов. В проекте, где все импорты специфичны и точечны, экономия составит 5–15%. Средняя экономия по исследованиям Webpack составляет 30–40% от размера бандла.

Что такое dead code

Как работает Tree Shaking: статический анализ модулей

Механизм Tree Shaking основан на графе зависимостей (dependency graph), который сборщик строит из всех import/export в проекте. На первом этапе сборщик обходит все файлы от точки входа (entry point) и собирает дерево модулей. На втором этапе анализируется, какие экспорты из каждого модуля реально импортируются в других модулях.

Для каждого модуля Webpack или Rollup помечает экспорты как использованные или неиспользованные. Неиспользованные экспорты исключаются из бандла. Однако сам модуль остаётся в бандле, если хотя бы один его экспорт используется. Полностью исключить модуль можно только через sideEffects флаг или если модуль не содержит никаких побочных эффектов.

Пример: до и после Tree Shaking

// utils.js — модуль с функциями
export function formatDate(date) {
  return date.toISOString().slice(0, 10);
}

export function formatCurrency(amount) {
  return "$" + amount.toFixed(2);
}

export function slugify(text) {
  return text.toLowerCase().replace(/\s+/g, "-");
}

// app.js — точка входа
import { formatDate } from "./utils";

const today = formatDate(new Date());
console.log(today);

// После Tree Shaking — в бандле только formatDate
function formatDate(date) {
  return date.toISOString().slice(0, 10);
}
const today = formatDate(new Date());
console.log(today);

Tree Shaking исключил formatCurrency и slugify из финального бандла, так как они не импортируются в app.js. Размер модуля utils.js уменьшился с 3 функций до 1. Если utils.js содержит side effects (например, глобальную инициализацию), Tree Shaking не сможет удалить даже неиспользуемые экспорты.

Tree Shaking в Webpack: настройка и оптимизация

Webpack включает встроенную поддержку Tree Shaking через плагин TerserPlugin в production-режиме. Для включения Tree Shaking достаточно двух условий: mode установлен в production (mode: "production") и модули используют ES-синтаксис (import/export). Webpack автоматически помечает неиспользуемые экспорты и передаёт их Terser для удаления.

Дополнительная настройка usedExports: true в optimization.webpack.config.js включает детальный анализ использования экспортов внутри модуля. Эта опция определяет, какие экспорты действительно используются (used), а какие являются только экспортированными (provided). Комбинация usedExports и Terser даёт максимальную эффективность удаления мёртвого кода.

Конфигурация Webpack для Tree Shaking

// webpack.config.js — Tree Shaking настройка
module.exports = {
  mode: "production",
  entry: "./src/app.js",
  output: {
    filename: "bundle.js",
  },
  optimization: {
    usedExports: true,
    minimize: true,
    concatenateModules: true,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules\/(?!(my-lib)\/).*/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              ["@babel/preset-env", { modules: false }],
            ],
          },
        },
      },
    ],
  },
};

Ключевой параметр — modules: false в @babel/preset-env. Babel по умолчанию преобразует ES-модули в CommonJS, что убивает Tree Shaking. modules: false запрещает Babel преобразовывать import/export, сохраняя ES-синтаксис для Webpack. concatenateModules дополнительно объединяет модули в общую область видимости, уменьшая количество IIFE и снижая размер бандла.

Проблема side effects и флаг sideEffects

Side effects (побочные эффекты) — действия модуля при его импорте, не связанные с экспортируемыми значениями: глобальные стили (import "./styles.css"), полифиллы (import "core-js/stable"), инициализация глобальных переменных или регистрация Service Worker. Если модуль содержит side effects, сборщик не может безопасно удалить его из бандла, даже если ни один экспорт не используется.

Флаг sideEffects в package.json сообщает сборщику, какие модули в пакете не имеют побочных эффектов. Для пакета, где все модули чистые (только экспорт функций), следует указать "sideEffects": false. Для пакетов с CSS или полифиллами — массив путей к файлам с побочными эффектами: "sideEffects": ["*.css"]. Без этого флага Tree Shaking не удалит даже неиспользуемые функции.

Как определить side effects в своём коде

Чтобы проверить, есть ли в модуле побочные эффекты, задайте вопрос: выполнит ли этот import какие-либо действия, не связанные с экспортом значений? import "./styles.css" добавляет CSS в DOM — это side effect. import { throttle } from "lodash-es" не имеет side effects — он только делает функцию throttle доступной. Полифиллы (import "core-js/stable") имеют side effects — они модифицируют глобальные прототипы.

Для собственных модулей рекомендуется: выносить стили и полифиллы в отдельные entry-точки, разделять чистые утилиты (функции без side effects) и модули с побочными эффектами (инициализация, логирование, регистрация Service Worker). В package.json проекта верхнего уровня указывать "sideEffects": false только если все модули чистые. Если есть стили — указывать "sideEffects": ["*.css"] точно.

Пример настройки sideEffects

{
  "name": "my-ui-lib",
  "version": "2.1.0",
  "sideEffects": [
    "*.css",
    "polyfills.js"
  ],
  "module": "dist/index.esm.js",
  "main": "dist/index.cjs.js"
}

"sideEffects": ["*.css", "polyfills.js"] означает: все CSS-файлы имеют побочные эффекты (их нельзя удалять) и polyfills.js тоже. Все остальные JS-файлы в пакете чистые — их можно безопасно shake-ить. Поле module указывает путь к ES-версии пакета, которую сборщик должен использовать вместо CommonJS-версии (main) для Tree Shaking.

Tree Shaking в React Native и Metro

React Native с Metro Bundler поддерживает ограниченную версию Tree Shaking. Metro не выполняет полноценный статический анализ использованных экспортов (usedExports), как Webpack. Вместо этого Metro полагается на Terser для удаления неиспользуемой части модулей на этапе минификации. Эффективность такого подхода ниже, чем полноценный Tree Shaking в Webpack.

Для максимальной оптимизации React Native проектов рекомендуется: использовать библиотеки с ES-модулями (поле module в package.json), подключать плагины babel-plugin-transform-remove-console для удаления отладочного кода, и настраивать Metro transformer.minifierConfig для Terser. Дополнительно Ram Bundle (разделение бандла на модули) уменьшает загрузку неиспользуемых экранов.