Tree shaking: Подробное руководство

Прежде чем начать нам нужно понять, какие типы модулей есть в экосистеме JavaScript. Приложения на JavaScript усложнились и возросло количество выполняемых ими задач. Стала очевидной необходимость разделения таких задач на изолированные области. Эти подзадачи мы называем модулями. Их основная цель — предотвратить повторение кода и переиспользовать код.

Что такое tree shaking?

Проще говоря, tree shaking означает удаление недостижимого кода (также известного как мертвый код) из пакета. В переводе tree shaking переводится как встряхивание дерева. Почему? Проведем аналогию. Можно представить свое приложение в виде дерева. Исходный код и библиотеки, которые вы фактически используете, представляют собой зеленые, живые листья дерева. Мертвый код представляет собой коричневые мертвые листья дерева, которые появляются осенью. Чтобы избавиться от опавших листьев, нужно встряхнуть дерево, чтобы они опали.

Этот термин был впервые популяризирован в сообществе фронтенд разработчиков команды Rollup. Но авторы всех динамических языков боролись с этой проблемой гораздо раньше. Идея алгоритма встряхивания дерева восходит как минимум к началу 1990-х годов. В области JavaScript tree shaking стал возможным со времен спецификации ECMAScript модулей (ESM) в ES2015, известной как ES6. С тех пор tree shaking была включена по умолчанию в большинстве сборщиков, потому что они уменьшают размер результирующего кода без изменения поведения программы. Основная причина этого заключается в том, что ESM являются статическими по своей природе. Давайте разберем, что это значит.

ES модули и CommonJS

CommonJS предшествует спецификации ESM. Он появился на несколько лет раньше. Он появился чтобы решить проблему отсутствия поддержки переиспользуемых модулей в экосистеме JavaScript. В CommonJS есть функция require(), которая извлекает внешний модуль на основе предоставленного пути и добавляет его в область видимости во время выполнения. Функция require является такой же функцией, как и любая другая функция. Это делает ее достаточно сложной для оценки результата вызова во время компиляции. Кроме того, возможно добавление вызовов require в любом месте кода — в вызове другой функции, в операторах if/else, в операторах switch и т. д.

В результате широкого внедрения CommonJS архитектуры, спецификация ESM остановилась на новой архитектуре, в которой модули импортируются и экспортируются с помощью соответствующих ключевых слов import и export. Поэтому больше никаких вызовов функций для добавления модулей. ESM также разрешает только объявления верхнего уровня, их вложение в какую-либо другую структуру невозможно. Это и делает его статичным. ESM не зависят от запуска во время выполнения.

Область применения и побочные эффекты

Есть еще одно препятствие, которое нужно преодолеть, чтобы избежать раздувания кода: побочные эффекты (сайд эффекты, side effects). Считается, что функция имеет побочные эффекты, когда она изменяет или зависит от факторов, внешних по отношению к области выполнения. Функция с побочными эффектами считается нечистой (impure function). Чистая функция (pure function) всегда будет давать один и тот же результат при каждом запуске, независимо от контекста или среды, в которой она была запущена.

const pure = (a: number, b: number): number => a + b
const impure = (c: number): number => window.foo.number + c

Сборщики стараются максимально оценить предоставленный код, чтобы определить, является ли модуль чистым. Но оценка кода во время компиляции или во время связывания может зайти слишком далеко. Поэтому предполагается, что пакеты с побочными эффектами не могут быть должным образом устранены, даже если они полностью недоступны. Из-за этого сборщики принимают ключ внутри файла package.json модуля, который позволяет разработчику заявить, не имеет ли модуль побочных эффектов. Таким образом, разработчик может отказаться от оценки кода и сказать сборщику, что код в конкретном пакете может быть исключен, если нет доступного импорта или оператора require, связывающего его. Это не только делает пакет более компактным, но также может ускорить время компиляции.

{
    "name": "some-package",
    "sideEffects": false
}

Если вы разработчик пакета, осторожно используйте побочные эффекты перед публикацией и, конечно же, пересматривайте его при каждом релизе, чтобы избежать каких-либо неожиданных критических изменений.

В дополнение к полю sideEffects также можно указать чистоту для каждого файла, добавляя встроенный комментарий /*@__PURE__*/ к вызову метода.

const x = */@__PURE__*/eliminated_if_not_called()

Эта встроенная аннотацию полезна для разработчика-потребителя. Она полезна в случае, если пакет не объявил sideEffects: false или в случае, если библиотека действительно представляет побочный эффект для определенного метода.

Оптимизация Webpack

Начиная с версии 4, Webpack требует все меньше конфигураций, используя при этом лучшие практики. Несколько плагинов было включено в ядро. Если вы не большой эксперт в webpack или если ваше приложение не содержит специфических сценариев, то tree shaking зависимостей — это вопрос всего одной строки. Файл webpack.config.js имеет корневое поле с именем mode. Всякий раз, когда значение этого свойства production, оно полностью оптимизирует ваши модули. Помимо устранения мертвого кода с помощью TerserPlugin, mode: production присвоит хэшированные имена для модулей и чанков, а также активирует следующие плагины:

• flag dependency usage
• flag included chunks
• module concatenation
• no emit on errors.

Не случайно все это происходит именно в production режиме. Вы не захотите, чтобы ваши зависимости были полностью оптимизированы в режиме разработки, потому что это значительно усложнит отладку. Поэтому я бы предложил использовать один из двух подходов. Для указания режима можно передать флаг режима в интерфейс командной строки Webpack:

# это значение перезапишет значение указанное в webpack.config.js
webpack --mode=production

Либо можно использовать переменную среды process.env.NODE_ENV в webpack.config.js:

mode: process.env.NODE_ENV === 'production' ? 'production' : development

В этом случае вы должны не забыть передать --NODE_ENV=production при развертывании приложения. Оба подхода являются абстракцией поверх известного плагина definePlugin из Webpack 3 и ниже. Какой вариант вы выберете, абсолютно не имеет значения.

Webpack 3 и ниже

Стоит отметить, что сценарии и примеры в разделе “Webpack 3 и ниже” могут не применяться к последним версиям Webpack и другим сборщикам. В этом разделе рассматривается использование UglifyJS 2 вместо Terser. UglifyJS — это пакет, из которого появился Terser, поэтому оценка кода между ними может различаться. Поскольку Webpack 3 и ниже не поддерживает свойство sideEffects в package.json, все пакеты должны быть полностью оценены, прежде чем код будет удален. Уже одно это делает подход менее эффективным, но также необходимо учитывать несколько предостережений.

Как упоминалось выше, компилятор не может сам определить, когда пакет входит в глобальную область. Но это не единственная ситуация, в которой он пропускает tree shaking. Есть более неочевидные сценарии. Рассмотрим пример пакета из документации Webpack:

// transform.js

import * as mylib from 'mylib';

export const someVar = mylib.transform({
  // ...
});

export const someOtherVar = mylib.transform({
  // ...
});

А это его использование:

// index.js

import { someVar } from './transforms.js';

// Use `someVar`...

Невозможно определить, вызывает ли mylib.transform побочные эффекты. Таким образом, никакой код не будет удален. Вот другие ситуации с аналогичным исходом:

• вызов функции из стороннего модуля, которую компилятор не может проверить,
• реэкспорт функций, импортированных из сторонних модулей.

Инструмент, который может помочь компилятору заставить tree shaking работать, называется babel-plugin-transform-imports. Он разделит все элементы и именованные экспорты на экспорты по умолчанию, что позволит оценивать модули по отдельности.

// до трансформации
import { Row, Grid as MyGrid } from 'react-bootstrap';
import { merge } from 'lodash';

// после трансформации
import Row from 'react-bootstrap/lib/Row';
import MyGrid from 'react-bootstrap/lib/Grid';
import merge from 'lodash/merge';

Он также имеет свойство в конфигурации, которое предупреждает разработчика, чтобы он избегал проблемных импортов. Если вы используете Webpack 3 или выше, и вы выполнили все необходимые действия с базовой конфигурацией и добавили рекомендуемые плагины, но бандл все еще выглядит раздутым, то я рекомендую попробовать этот пакет.

Поднятие (hoisting) и время компиляции

Во времена CommonJS большинство сборщиков просто заключали каждый модуль в объявление другой функции и добавляли их внутрь объекта.

(function (modulesMap, entry) {
  // provided CommonJS runtime
})({
  "index.js": function (require, module, exports) {
     let { foo } = require('./foo.js')
     foo.doStuff()
  },
  "foo.js": function(require, module, exports) {
     module.exports.foo = {
       doStuff: () => { console.log('I am foo') }
     }
  }
}, "index.js")

Помимо того, что это трудно анализировать статически, это принципиально несовместимо с ESM, потому что мы видели, что мы не можем обернуть операторы импорта и экспорта. Итак, сейчас сборщики поднимают каждый модуль на верхний уровень.

// moduleA.js
let $moduleA$export$doStuff = () => ({
  doStuff: () => {}
})

// index.js
$moduleA$export$doStuff()

Этот подход полностью совместим с ESM; кроме того, это позволяет оценке кода легко обнаруживать модули, которые не вызываются, и удалять их. Недостаток этого подхода заключается в том, что во время компиляции требуется значительно больше времени, потому что он касается каждого оператора и сохраняет пакет в памяти во время процесса. Это важная причина, по которой производительность пакетов стала еще более серьезной проблемой и почему скомпилированные языки используются в инструментах для веб-разработки. Например, esbuild — это сборщик, написанный на Go, а SWC — это компилятор TypeScript, написанный на Rust, который интегрируется со Spark, сборщиком, также написанным на Rust.

Избегайте преждевременной транспиляции

Есть одна проблема, которая, к сожалению, довольно распространена и может иметь негативные последствия для tree shaking. Короче говоря, это происходит, когда вы работаете со специальными загрузчиками, интегрируя разные компиляторы в свой сборщик. Распространенными комбинациями являются TypeScript, Babel и Webpack — во всех возможных сочетаниях. И у Babel, и у TypeScript есть собственные компиляторы, и соответствующие загрузчики позволяют разработчику использовать их для упрощения интеграции. И в этом кроется скрытая угроза.

Эти компиляторы достигают вашего кода до оптимизации кода. И по умолчанию или из-за неправильной настройки эти компиляторы часто выводят модули CommonJS вместо ESM. Как упоминалось в предыдущем разделе, модули CommonJS являются динамическими и, следовательно, не могут быть должным образом оценены для устранения мертвого кода. Этот сценарий становится все более распространенным в настоящее время с ростом «изоморфных» приложений (т. е. приложений, которые выполняют один и тот же код как на стороне сервера, так и на стороне клиента). Поэтому обязательно проверяйте код, который получает алгоритм оптимизации.

Tree shaking чеклист

Теперь, когда вы знаете все тонкости того как создаются бандлы и работает tree shaking, давайте выведем чеклист. Надеюсь, это сэкономит вам время и позволит оптимизировать не только производительность вашего кода, но, возможно, даже время сборки.

• Используйте ESM, и не только в своей собственной кодовой базе, но также отдавайте предпочтение пакетам, которые сами выдают ESM.
• Убедитесь, что вы точно знаете, какие из ваших зависимостей (если таковые имеются) не объявили sideEffects или не установили их в true.
• Используйте встроенную аннотацию для объявления вызовов методов, которые являются чистыми при использовании пакетов с побочными эффектами.
• Если вы выводите модули CommonJS, обязательно оптимизируйте свой пакет, прежде чем преобразовывать операторы импорта и экспорта.

Создание пакетов

Надеюсь, к этому моменту мы все согласимся с тем, что ESM был хорошей идеей в экосистеме JavaScript. К счастью, авторы пакетов могут принять надежные меры, чтобы облегчить своим пользователям быструю и беспрепятственную миграцию. С некоторыми небольшими дополнениями в package.json ваш пакет сможет сообщить сборщикам, какие среды поддерживает ваш пакет:

• Включите экспорт ESM.
• Добавьте "type": "module"
• Укажите точку входа "module": "./path/entry.js"

И вот пример, который получается, когда соблюдаются все лучшие практики и вы хотите поддерживать как веб-среду, так и среду Node.js:

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

В дополнение к этому команда Skypack ввела показатель качества пакета в качестве эталона, чтобы определить, настроен ли данный пакет на долговечность и использует ли лучшие практики. @skypack/package-check может быть добавлен как devDependency в ваш пакет, чтобы легко выполнять проверки перед каждым релизом. Также рекомендую прочитать статью Создание tree-shaking библиотеки с Rollup и Vue, в ней также рассказано почему Webpack не подходит для создания tree-shaked библиотек.

Если у вас нет опыта server side программирования, переменные среды могут показаться чем-то магическим. Этот недостаток знаний может поставить вас в тупик, когда вы закончите создавать приложения todo на localhost и попытаетесь создать продакшн сборку в первый раз. Если вы хотите узнать, как использовать переменные среды в ваших собственных инструментах, или глубоко погрузиться в то, как переменные среды работают в React, вы можете продолжить чтение этой статьи. Но если вы ищете быстрое решение и используете Create React App, ознакомьтесь с документацией здесь. Пользователи NextJS, ознакомьтесь с документацией здесь.

Проблема, которую мы решаем

Как объявить различные URL-адресов API для локальной разработки и для продакшн сборки.

Как решить эту проблему

Использовать переменные среды. При работе с React переменные среды — это переменные, доступные через глобальный объект process.env. Этот глобальный объект предоставляется вашей средой через NodeJS. И поскольку у нас нет NodeJS в браузере, нам понадобится webpack. В этой статье рассмотрим два способа установки и использования переменных среды для ваших React проектов с помощью webpack: с помощью скриптов npm и с помощью файла .env.

Способ 1: Использование скриптов npm для установки переменных среды

Во-первых, установите webpack и webpack-cli из npm:

npm install --save-dev webpack webpack-cli

Перейдите в файл package.json, проверьте поле scripts и найдите команды, которые запускают webpack. Вероятно, это будет выглядеть примерно так:

{
  // ...
  scripts: {
    "dev": "webpack --config webpack.config.dev.js",
    "build": "webpack --config webpack.config.build.js"
  }
}

Давайте добавим некоторые переменные окружения с флагом --env в scripts:

{
  // ...
  scripts: {
    "dev": "webpack --env.API_URL=http://localhost:8000 --config webpack.config.dev.js",
    "build": "webpack --env.API_URL=https://www.myapi.com --config webpack.config.build.js"
  }
}

Мы добавили --env.API_URL= часть в обоих скриптах. Теперь запустите команду npm run dev, перейдите к React компоненту и используйте process.env.API_URL:

const App = () => <h1>{process.env.API_URL}</h1>;

И тут проект должен сломаться.

Сломается он потому, что когда мы используем переменные окружения в клиентском коде, они на самом деле просто служат заполнителями, которые будут заменены при компиляции нашего кода. Проблема в том, что мы не сказали webpack скомпилировать эти переменные в реальные значения. Давайте сделаем это в нашем конфигурационном файле webpack с плагином DefinePlugin:

const webpack = require('webpack'); // DefinePlugin это часть webpack, поэтому это require обязателен

// возвращаем функцию из config файла
// переменная `env` будет просто объектом { API_URL: 'http://localhost:8000' }
// в ней будут содержаться все переменные среды, которые мы указали в package.json

module.exports = (env) => {
  // этот объект это сама конфигурация webpack
  return {
    plugins: [
      // добавим плагин в список плагинов
      new webpack.DefinePlugin({ `process.env.API_URL`: JSON.stringify(${env.API_URL}) })
    ]
  };
};

DefinePlugin требует, чтобы вы буквально определили свои «переменные среды». Вы также можете применить .reduce к переменным среды, чтобы получить объект:

module.exports = (env) => {
  // создаем объект из переменных среды
  const envKeys = Object.keys(env).reduce((prev, next) => {
    prev[`process.env.${next}`] = JSON.stringify(env[next]);
    return prev;
  }, {});

  return {
    plugins: [
      new webpack.DefinePlugin(envKeys)
    ]
  };
};

Если вы запустите команду сейчас, все скомпилируется, и ваш process.env.API_URL будет скомпилирован в правильный URL-адрес на основе переменной среды.

Способ 2: Использование файла .env для установки переменных среды

Вся идея здесь состоит в том, чтобы создать файл (называемый просто .env), заполненный переменными среды. Чтобы защитить пароли и другие значения переменных среды, добавьте файл .env в .gitignore. Фронтенд код будет ссылаться на одну и ту же переменную среды (process.env.API_URL) в обеих средах (при локальной разработке и на продакшене), но поскольку вы определили разные значения в своих .env, скомпилированные значения будут отличаться.

Создадим файл .env

Этот файл должен находиться в корневом каталоге проекта и называться .env. Добавим переменную:

API_URL=http://localhost:8000

Обработка файла .env

Теперь нам нужен какой-то способ обработки файлов и их содержимого. Для этого мы собираемся использовать популярный npm пакет под названием dotenv. Dotenv широко используется (create-react-app использует его). Он будет получать переменные из нашего файла .env и добавлять их в глобальный process.env.

$ npm install --save-dev dotenv

Добавление переменных в проект React

Есть одна проблема. Dotenv работает только на стороне сервера. А мы хотим использовать переменные среды на стороне клиента, на фронтенде. В данном случае мы разрабатываем клиентскую часть. И dotenv нужна какая-то среда для фактического хранения переменных. Здесь поможет Webpack. Воспользуемся плагином DefinePlugin в нашей webpack конфигурации:

const webpack = require('webpack');
const dotenv = require('dotenv');

module.exports = () => {
  // dotenv вернет объект с полем parsed 
  const env = dotenv.config().parsed;
  
  // сделаем reduce, чтобы сделать объект
  const envKeys = Object.keys(env).reduce((prev, next) => {
    prev[`process.env.${next}`] = JSON.stringify(env[next]);
    return prev;
  }, {});

  return {
    plugins: [
      new webpack.DefinePlugin(envKeys)
    ]
  };
};

При необходимости проверьте параметры конфигурации dotenv в документации на github. Вызов .config() в dotenv вернет объект со всеми переменными среды, установленными в вашем файле .env через поле parsed. Теперь давайте проверим наш React код:

const App = () => <h1>{process.env.API_URL}</h1>;

И это работает! Он показывает значение переменной среды API_URL, определенной в .env. Осталась только одна проблема: нам все еще нужно определить различные API_URL для локальной разработки и продакшена.

Различные переменные среды для разных сред

Вся идея состоит в том, чтобы создать разные файлы .env для разных сред и позволить webpack выбрать правильный файл .env в зависимости от активной среды. Поэтому создайте два файла в корневом каталоге проекта:

• .env (содержит все переменные среды для продакшн)
• .env.development (содержит все переменные среды для локальной разработки)

Чтобы было ясно: мы добавляем к имени файла .env сопоставление имени среды. Общепринятой практикой является использование исходного файла .env для продакшн сборки, поэтому мы не будем добавлять постфикс для продакшн .env .

Настройка активной среды с помощью scripts в package.json

Мы собираемся использовать scripts (как мы это делали в методе 1), чтобы установить текущую среду в нашем package.json:

{
  "scripts": {
    "dev": "webpack --env.ENVIRONMENT=development --config webpack.config.dev.js",
    "build": "webpack --env.ENVIRONMENT=production --config webpack.config.build.js"
  }
}

Так как мы определили нашу среду в нашем package.json, теперь она доступна в нашей конфигурации webpack. Следующим шагом будет переход к webpack конфигурации и дать ему использовать файл .env, принадлежащий активной среде. Как и раньше, мы используем dotenv, но теперь мы указываем пользовательский path в параметрах.

const webpack = require('webpack');
const dotenv = require('dotenv');
const fs = require('fs'); // для проверки существования файла
const path = require('path'); // для получения текущего пути

module.exports = (env) => {
  // получаем корневой путь (предполагаем, что webpack config лежит в корне проекта)
  const currentPath = path.join(__dirname);
  
  // путь по умолчанию (будет использован для продакшена - `.env`)
  const basePath = currentPath + '/.env';

  // склеиваем имя среды с именем файла для получения имени env файла
  const envPath = basePath + '.' + env.ENVIRONMENT;

  // проверяем существует ли env файл, если нет используем имя по умолчанию
  const finalPath = fs.existsSync(envPath) ? envPath : basePath;

  // устанавливаем параметр path в dotenv
  const fileEnv = dotenv.config({ path: finalPath }).parsed;
  
  // сделаем reduce, чтобы получить объект
  const envKeys = Object.keys(fileEnv).reduce((prev, next) => {
    prev[`process.env.${next}`] = JSON.stringify(fileEnv[next]);
    return prev;
  }, {});

  return {
    plugins: [
      new webpack.DefinePlugin(envKeys)
    ]
  };

Эта вся необходимая настройка, но вы можете создать больше .env файлов для большего количества сред (например, .env.staging) по аналогии.