Что такое tree shaking?

Одной из важнейших задач при оптимизации современных веб-приложений является уменьшение объема передаваемого по сети JavaScript-кода. Для достижения этой цели используется технология tree shaking, название которой можно образно перевести как «потряхивание дерева» для того, чтобы сбросить сухие, ненужные листья. Суть этого процесса заключается в автоматическом удалении неиспользуемого кода из итогового файла сборки. Например, если вы подключаете большую библиотеку утилит вроде lodash-es, но используете из нее всего одну функцию, tree shaking гарантирует, что в финальный продукт попадет только эта единственная функция, а весь остальной массив неиспользуемого кода будет отброшен.

Технология tree shaking неразрывно связана с использованием ES модулей. Поскольку ES модули имеют статическую структуру импортов и экспортов, инструменты сборки могут точно проанализировать граф зависимостей еще до запуска кода. Сборщик видит, какие именно сущности импортируются из модуля, а какие остаются невостребованными, что делает возможным безопасное удаление «лишнего». Без статического анализа, присущего ES модулям (например, в динамическом CommonJS), такое агрессивное удаление кода было бы технически невозможным, так как функции могли бы вызываться динамически по строковым именам.

Для того чтобы инструменты сборки корректно применяли эту оптимизацию к сторонним библиотекам, разработчики пакетов используют специальное свойство sideEffects в файле package.json. Если библиотека указывает "sideEffects": false, это говорит сборщику о том, что все модули пакета чисты и не имеют побочных эффектов при простом импорте (например, не изменяют глобальный объект window и не выполняют код автоматически при подключении). Благодаря этому сборщик может смело удалять любые неиспользуемые импорты из этой библиотеки. Итогом работы tree shaking становится кардинальное уменьшение размера bundle, что ускоряет загрузку страницы и повышает общую производительность клиентской части приложения.