Когда JS-приложения достигает определенных размеров, целесообразно разделить его код на модули. Минус такого подхода в том, что можно импортировать код, который на самом деле не используется. На помощь приходит Tree shaking - метод оптимизации пакетов вашего кода. Его суть: изъять неиспользуемый код из конечного файла.

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

export function add(a, b) {
console.log("add");
return a + b;
}

export function minus(a, b) {
console.log("minus");
return a - b;
}

export function multiply(a, b) {
console.log("multiply");
return a * b;
}

export function divide(a, b) {
console.log("divide");
return a / b;
}
Предположим, что в основном скрипте мы импортируем и применяем из перечисленных только функцию add() .

import { add } from "./mathUtils";

add(1, 2);
Если для сборки мы используем такой инструмент, как Webpack, то все функции из файла mathUtils.js окажутся в конечном пакете (даже если мы импортировали только add()).

С Tree shaking в конечный пакет попадет только тот код, что действительно использовался или был импортирован.

Как работает Tree shaking?

Хотя концепция Tree shaking существует с 90-х годов, в Javascript она проявила себя только с появлением модулей ES6. Все потому, что tree shaking может работать только если модули «статические».

До появления ES6 были CommonJS модули, которые использовали синтаксис require(). Они были «динамическими», то есть мы могли импортировать новые модули в условных выражениях.

var myDynamicModule;

if (condition) {
myDynamicModule = require("foo");
} else {
myDynamicModule = require("bar");
}
Именно «динамическая» природа CommonJS модулей препятствовала применению tree shaking, потому что невозможно было определить нужный модуль к запуску кода.

В ES6 был представлен новый, полностью статический синтаксис модулей. С importмы больше не можем импортировать модуль динамично.

То есть такой код не будет работать:

if (condition) {
import foo from "foo";
} else {
import bar from "bar";
}

Что «стряхивает» tree shaking?

Реализация tree shaking в Webpack позволяет максимально избавиться неиспользованного кода. Например, код, который мы импортировали из import, но не использовали, изымается.

import { add, multiply } from "./mathUtils";

add(1, 2);
В примере выше функция multiply() никогда не используется, поэтому она будет удалена из конечного пакета.

Даже отдельные свойства импортируемых объектов удаляются, если к ним не обращались.

файл myInfo.js:

export const myInfo = {
name: "Ire Aderinokun",
birthday: "2 March"
}

файл index.js:

import { myInfo } from "./myInfo.js";

console.log(myInfo.name);
В приведенном примере свойство birthday не попадет в конечный пакет, потому что никогда не используется.

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

Как насчет "побочных эффектов"?

Побочным эффектом (side effect) называют код, который выполняет некоторые действия при импорте, не обязательно связанные с экспортом. Хорошим примером побочного эффекта является полифил. Как правило, полифилы не предусматривают экспорт в основном скрипте, а скорее о проекте в целом.

Tree shaking не может определить какие скрипты являются побочными эффектами автоматически, поэтому важно определить их вручную. Продемонстрируем это ниже.

Как использовать tree shaking?

Как правило, tree shaking реализуется через Бандлер кода. Например, если вы используете Webpack, вы легко можете указать mode как production в файле webpack.config.js. Наряду с другими оптимизациями, вы активируете tree shaking.

module.exports = {
...,
mode: "production",
...,
};

Чтобы обозначить конкретные файлы как побочные эффекты,  необходим файл package.json.

{
...,
"sideEffects": [
"./src/polyfill.js"
],
...,
}
Больше информации о реализации tree shaking можно найти в документации Webpack.