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 библиотек.

Содержание туториала по React Вам не нужно создавать весь веб-сайт с помощью React. Можно ограничиться добавление React в HTML. Добавление React в HTML не требует установки, занимает пару минут и позволяет сразу начать писать интерактивные компоненты.

Добавление React в HTML

React с самого начала был разработан для постепенного внедрения. Большинство веб-сайтов не полностью построены (и не должны) с помощью React. В этом руководстве показано, как добавить немного интерактивности на существующую HTML-страницу. Попробуйте это на своем собственном веб-сайте или на пустом HTML-файле. Все, что вам нужно, это подключение к Интернету и текстовый редактор, такой как Блокнот или VS Code (Вот как настроить ваш редактор для подсветки синтаксиса).

Шаг 1. Добавьте корневой HTML-тег

Сначала откройте HTML-страницу, которую хотите отредактировать. Добавьте пустой тег <div>, чтобы отметить место, где вы хотите отобразить что-то с помощью React. Дайте этому <div> уникальное значение атрибута id. Например:

<!-- ... существующий HTML ... -->

<div id="like-button-root"></div>

<!-- ... существующий HTML ... -->

Он называется "корень" ("root"), потому что с него начинается дерево React. Такой корневой HTML-тег можно разместить в любом месте внутри тега <body>. Оставьте его пустым, потому что React заменит его содержимое вашим компонентом React. У вас может быть столько корневых тегов HTML, сколько вам нужно на одной странице.

Шаг 2: Добавьте теги script

На HTML-странице прямо перед закрывающим тегом </body> добавьте три тега <script> для следующих файлов:

• react.development.js позволяет вам определять компоненты React.
• react-dom.development.js позволяет React отображать HTML-элементы в DOM.
• like-button.js — это место, где будет находиться код нашего компонента, который напишем на следующем шаге.

Теперь код HTML-страницы должен заканчиваться так:

    <!-- конец страницы -->
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="like-button.js"></script>
  </body>
</html>

Перед развертыванием веб-сайта в продакшн обязательно замените development.js на production.min.js. Сборки React для разработки предоставляют более полезные сообщения об ошибках, но сильно замедляют работу сайта.

Шаг 3: Создайте React компонент

Создайте файл с именем like-button.js рядом со своей HTML-страницей, добавьте этот фрагмент кода и сохраните файл. Этот код определяет React компонент под названием LikeButton.

'use strict';

function LikeButton() {
  const [liked, setLiked] = React.useState(false);

  if (liked) {
    return 'You liked this!';
  }

  return React.createElement(
    'button',
    {
      onClick: () => setLiked(true),
    },
    'Like'
  );
}

Шаг 4: Добавьте React компонент на страницу

Наконец, добавьте три строки в конец файла like-button.js. Эти строки кода находят <div>, который мы добавили в HTML на первом шаге, создают корень React, а затем отображают React компонент кнопки «Нравится» внутри него:

const rootNode = document.getElementById('like-button-root');
const root = ReactDOM.createRoot(rootNode);
root.render(React.createElement(LikeButton));

Компоненты можно использовать повторно. Вы можете захотеть отобразить компоненты React в нескольких местах на одной HTML-странице. Это полезно, если части вашей страницы, основанные на React, отделены друг от друга. Вы можете сделать это, поместив несколько корневых тегов в свой HTML, а затем визуализировав компоненты React внутри каждого из них с помощью ReactDOM.createRoot(). Например:

1. В index.html добавьте дополнительный элемент-контейнер <div id="another-root"></div>.
2. В like-button.js добавьте в конце еще три строчки:

const anotherRootNode = document.getElementById('another-root');
const anotherRoot = ReactDOM.createRoot(anotherRootNode);
anotherRoot.render(React.createElement(LikeButton));

Если вам нужно отрендерить один и тот же компонент во многих местах, вы можете назначить CSS класс вместо id для каждого корня, а затем найти их все.

Шаг 5: Минифицируйте JavaScript для продакшена

Неминифицированный JavaScript может значительно замедлить загрузку страниц для пользователей. Перед развертыванием веб-сайта в продакшене рекомендуется минимизировать его скрипты.

• Если у вас нет шага минификации для скриптов, вот один из способов его настройки.

npx terser -c -m -o like-button.min.js -- like-button.js

• Если вы уже минимизируете скрипты своего приложений, ваш сайт будет готов к работе, если вы убедитесь, что развернутый HTML загружает версии React, заканчивающиеся на production.min.js следующим образом:

<script
  src="https://unpkg.com/react@18/umd/react.production.min.js"
  crossorigin
></script>
<script
  src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
  crossorigin
></script>

React с JSX

Приведенные выше примеры основаны на функциях, изначально поддерживаемых браузерами. Вот почему like-button.js использует вызов JavaScript функции, чтобы сообщить React, что отображать:

return React.createElement(
  'button',
  {
    onClick: () => setLiked(true),
  },
  'Like'
);

Однако React также предлагает возможность использовать вместо этого JSX, HTML-подобный синтаксис JavaScript:

return <button onClick={() => setLiked(true)}>Like</button>;

Эти два фрагмента кода эквивалентны. JSX — популярный синтаксис для описания разметки в JavaScript. Многие с ним знакомы и считают полезным для написания UI кода — как с React, так и с другими библиотеками.

Попробуйте JSX

Самый быстрый способ попробовать JSX — добавить на страницу компилятор Babel в теге <script> . Поместите его перед like-button.js, а затем в тег <script> для like-button.js добавьте атрибут type="text/babel":

  <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script src="like-button.js" type="text/babel"></script>
</body>

Теперь вы можете открыть like-button.js и заменить

return React.createElement(
  'button',
  {
    onClick: () => setLiked(true),
  },
  'Like'
);

на эквивалентный JSX код:

return <button onClick={() => setLiked(true)}>Like</button>;

Поначалу может показаться немного непривычным смешивать JS с разметкой, но вам это понравится. Ознакомьтесь со статьей Разметка с JSX. Компилятор Babel в теге <script> отлично подходит для обучения и создания простых демо. Однако это замедляет ваш сайт и не подходит для продакшена. Когда вы будете готовы двигаться дальше, удалите тег <script> с Babel и удалите атрибут type="text/babel". Вместо этого в следующем разделе мы настроим препроцессор JSX для преобразования всех тегов <script> из JSX в JS.

Добавление JSX в проект

Добавление JSX в проект не требует сложных инструментов, таких как сборщик или сервер разработки. Добавление препроцессора JSX очень похоже на добавление препроцессора CSS. Перейдите в папку проекта в терминале и вставьте эти две команды (убедитесь, что у вас установлен Node.js):

1. npm init -y (if it fails, here’s a fix)
2. npm install @babel/cli@7 babel-preset-react-app@10

Если вы получаете сообщение об ошибке "Invalid name" при запуске npm init -y, переименуйте папку проекта, чтобы она содержала только строчные буквы ASCII или дефисы (например, my-project), и повторите попытку. В данном случае npm будет нужен только для установки препроцессора JSX. И React, и код приложения могут оставаться в виде тегов <script> без изменений.

Запуск препроцессора JSX

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

1. Создайте папку с именем src.
2. В терминале выполните следующую команду:

npx babel --watch src --out-dir . --presets babel-preset-react-app/prod

Не ждите завершения. Эта команда запускает автоматическое наблюдение за изменениями в JSX внутри src.

3. Переместите свой файл like-button.js c JSX в папку src.

Наблюдатель создаст предварительно обработанный like-button.js с простым JavaScript кодом, подходящим для браузера. Если вы видите сообщение об ошибке "You have mistakenly installed the babel package" ("Вы установили пакет babel по ошибке"), возможно, вы пропустили предыдущий шаг (Добавление JSX в проект). Выполните его в той же папке, а затем повторите попытку. Инструмент, который вы только что использовали, называется Babel, и вы можете узнать больше о нем из его документации. В дополнение к JSX он позволяет вам использовать самые последние функции синтаксиса JavaScript, не беспокоясь о поломках в старых браузерах. Если вы освоились с инструментами сборки и хотите, чтобы они делали для вас больше, то здесь вы можете найти обзор на некоторые из самых популярных и доступных наборов инструментов.

React без JSX

Первоначально JSX был представлен для того, чтобы написание компонентов с помощью React было таким же привычным, как написание HTML. С тех пор синтаксис получил широкое распространение. Однако могут быть случаи, когда вы не хотите или не можете использовать JSX. У вас есть два варианта:

• Используйте альтернативу JSX, такую как htm, которая использует шаблонные строки JavaScript вместо компилятора.
• Используйте React.createElement() со специальной структурой, описанной ниже.

С JSX вы бы написали такой компонент:

function Hello(props) {
  return <div>Hello {props.toWhat}</div>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Hello toWhat="World" />);

С React.createElement() вы бы написали это так:

function Hello(props) {
  return React.createElement('div', null, 'Hello ', props.toWhat);
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(Hello, { toWhat: 'World' }, null));

Он принимает несколько аргументов: React.createElement(component, props, ...children). Вот как они работают:

1. Компонент, который может быть строкой, представляющей элемент HTML или функциональный компонент.
2. Объект с любыми пропсами, который вы хотите передать
3. Остальные являются дочерними компонентами, такими как текстовые строки или другие элементы.

Если вам надоело постоянно вводить React.createElement(), один из распространенных шаблонов — назначить сокращение:

const e = React.createElement;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(e('div', null, 'Hello World'));

Затем, если вы предпочитаете этот стиль, он может быть таким же удобным, как и JSX.