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

Хорошо, что такое устранение мертвого кода? Хороший вопрос.

Устранение мертвого кода подходит к проблеме с противоположной стороны. Он анализирует ваш код после его объединения и удаляет код, который не используется в вашем приложении.

В конечном итоге они оба используются для удаления ненужного кода.

При этом, вот один лайнер, который поможет объяснить это всем вашим друзьям.

Вместо того, чтобы исключать мертвый код, мы включаем живой код. (Встряхивание дерева)

-Рич Харрис, создатель RollUp

Для получения дополнительной информации о различиях между этими двумя я рекомендую ознакомиться с этой средней статьей Rich. Он гораздо лучше меня справляется с объяснением различий между этими подходами.

Как использовать встряхивание дерева?

Благодаря импорту и экспорту ES6 мы можем явно указать, какие фрагменты кода мы хотим импортировать в наше приложение.

Настраивать

Следующий код требует, чтобы у вас был установлен webpack 2 плюс babel-loader и babel-preset-es2015.

веб-пакет 2

$ npm install webpack --save-dev

babel-loader и babel-preset-es2015

$ npm install babel-loader babel-core babel-preset-es2015 --save-dev

Чтобы использовать локальную версию webpack, вам нужно добавить два скрипта в свой package.json. Один для dev (начало) и один для prod (сборка). Флаг -p в сценарии сборки указывает webpack запускать UglifyJs плюс другие производственные соображения при объединении. Для получения дополнительной информации ознакомьтесь с руководством Сборка для производства на webpack.js.org.

package.json

Далее нам нужно настроить конфигурацию нашего веб-пакета. Должно выглядеть примерно так.

webpack.config.js

Самая важная часть в этом - это параметр, который мы передаем в пресет es2015 { "modules": false }. Это говорит babel не компилировать наши модули ES6 в модули CommonJs.

Мы не хотим, чтобы babel компилировал их в CommonJs, потому что webpack 2 понимает импорт / экспорт ES6, что позволяет ему встряхивать дерево.

Теперь, когда у нас есть базовая настройка, давайте взглянем на код.

index.js

Здесь мы заявляем, что хотим импортировать только foo из нашего файла utils, а затем вызываем foo.

utils.js

Выше у нас есть простой файл utils, в который мы экспортируем две функции. Ясно, что мы не используем функцию столбца. Посмотрим, что произойдет, когда мы запустим нашу сборку.

$ npm start

Это создаст файл с именем index.bundle.js в вашем каталоге /build. Если вы откроете его и прокрутите до того, что выглядит как ваш код, вы заметите, что функция панели все еще там.

index.bundle.js

Здесь важно отметить этот бит.

/* unused harmony export bar */.

По сути, это говорит UglifyJs, что он может удалить bar() из кода, когда запускает проверку на мертвый код.

Теперь запустите сценарий сборки для оптимизации с помощью UglifyJs.

$ npm run build

Теперь вы должны видеть меньше кода в вашем index.bundle.js.

index.bundle.js

Как webpack справляется с тряской дерева?

Мы уже вкратце обсуждали это выше, но стоит повторить.

В webpack 2 он понимает импорт / экспорт ES6 без необходимости в babel компилировать их в CommonJs. Поскольку теперь у webpack есть такая возможность, это означает, что он понимает, какие функции используются, а какие нет. Так как веб-пакет объединяет ваш код, он помечает фрагменты кода, которые, как он знает, не используются с определенными флагами. Такие как это.

Эти флаги затем подбираются UglifyJs и его алгоритмом удаления мертвого кода, что приводит к уменьшению пакета и удалению любого лишнего кода.

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

Ссылки

Если вам понравилась эта статья, покажите ❤️ ниже. Если вы этого не сделали, давайте поговорим об этом ниже 😃.

Изначально размещено в моем блоге на http://johnstewart.io.