Как проверить, работает ли встряхивание дерева с Webpack 2?

Question

Я только что закончил обновление своего приложения реагирования с веб-пакета 1 на веб-пакет 2. Однако размер моего пакета увеличился на ~30 КБ. Я надеялся, что размер пучка уменьшится. Как я могу подтвердить, что встряхивание дерева сработало. И почему увеличение?

Answer 1

TL;DR: Начиная с версии 2.3, в веб-паке не трясется дерево. Он просто использует UglifyJS для удаления неиспользуемого кода.

---

Сначала мы должны определить, что такое дрожание деревьев.

• Stackru определяет его как "алгоритм устранения мертвого кода для современного javascript".

• Webpack поясняет, что он использует импорт / экспорт модуля ES2015 для статической структуры своей модульной системы.

• Свертывание (который первоначально популяризировал этот термин) также имеет аналогичное объяснение.

Таким образом, мы можем вывести конкретное определение: статическое исключение экспорта неиспользуемых модулей ES.

Теперь давайте посмотрим, какие этапы преобразования обычно имеет каждый модуль:

• babel-загрузчик получает точку входа, которая является файлом javascript в каком-либо модульном формате. Бабель может либо преобразовать его в другой формат модуля, либо оставить как есть (module: false)
• Webpack статически проанализирует файл и найдет импортированные модули (используя какое-то регулярное выражение)
• Webpack либо преобразует формат модуля (если babel не преобразует его уже), либо добавит некоторые оболочки (для модулей commonjs)
• импортированный модуль становится точкой входа и переходит в babel-loader
• после того, как все модули загружены и преобразованы, uglify обработает пакет результатов и удалит неиспользуемый код (unused: true)

Теперь мы можем видеть, что хотя uglify может удалять неиспользуемые экспорты, на самом деле это не зависит от синтаксиса модуля ES. Это просто удаление мертвого кода общего назначения, поэтому его нельзя определить как "встряхивание дерева".

Итак, как мы можем проверить, есть ли у вебпака дрожание деревьев?

• Прежде всего, весь код должен быть в формате модуля ES.
• Как уже упоминалось в другом ответе, мы должны отключить Uglify.
• Мы также должны отключить преобразование модуля babel, так как мы не можем знать, используется ли модуль на этом этапе.

И теперь, если webpack действительно реализует алгоритм встряхивания дерева, мы можем подтвердить это, посмотрев на размер пакета этой точки входа:

import { keyBy } from 'lodash-es'; // lodash is in ES module format

console.log(keyBy([{ key: 'value' }], 'key'));

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

Answer 2

Есть несколько шагов, которые вы можете предпринять:

1. выключить минификацию
2. вставлять комментарии в некоторые функции, которые вы знаете, не используются
3. проверьте вывод, чтобы увидеть, есть ли эти комментарии или нет

Webpack также может показать вам размер каждого модуля / пакета импорта. Например, на работе у нас есть пакет, который включает в себя как lodash, так и подчеркивание, потому что для одной из библиотек, которые мы используем, требуется каждая из них; Веб-пакет четко показывает, сколько килобайт добавляет каждый пакет:

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