Читать Интерактивная версия этого поста в моем блоге.
вступление
Работа над крупными проектами вызывает много сложных задач, контроль приложений является одним из них. Когда проект будет расти, неизбежно вы начнете разделять большие участки функций на отдельные модули или суб-применить, делегируя разработку другим командам или, иногда, даже другие компании. Вскоре у вас есть огромное применение, Tens Teams строит сотни модулей, все они будут упакованы, объединены и отправлены по отношению к пользователю.
Управление размером пакета становится критическим на данный момент, один модуль, одно плохое яблоко , может просто испортить все. К счастью, WebPack делает большую оптимизацию под капотом, чтобы убедиться, что вы отправляете в качестве минимального кода по мере необходимости. Однако, и я был свидетелем этого снова и снова, вы можете сделать одну простую ошибку, которая не позволят WebPack отработать свою магию. Поговорим об этом.
TL; DR
Мы все знаем, что на данный момент WebPack делает «дрожание дерева», чтобы оптимизировать размер пакета. На всякий случай, «дрожание дерева»-это термин, обычно используемый в контексте JavaScript для устранения мертвого кода или простыми словами-код экспорта, который не был импортирован и выполнен, будет обнаружен как неиспользованный , поэтому его можно безопасно удалить, чтобы уменьшить размер пакета.
То, чего вы, возможно, не знаете, это не WebPack, который очищает мертвый код как таковой. Конечно, он выполняет большую часть работы «подготовки», но это Терсер пакет, который на самом деле * Отрезать * неиспользованный код. Terser – это диапазон JavaScript, Mangler и компрессор инструментарий для ES6+.
Давайте выпустим это – WebPack возьмет ваши модули, объединит их в куски и подайте в Terser для минификации (все это, очевидно, произойдет только в том случае, если включена оптимизация).
Время выделить несколько ключевых моментов:
- По умолчанию WebPack всегда будет пытаться объединить ваш код из разных модулей (файлов) в одну область и создать из него кусок позже. Например. MODULEA.JS Imports Несколько методов из moduleb.js в конечном итоге станут Chunk- ) Однако, когда это не может быть объединено, WebPack зарегистрирует эти файлы в качестве модулей, поэтому к ним можно получить доступ во всем мире через внутреннего помощника webpack_require потом.
- По умолчанию Terser не отключает глобальные ссылки в вашем коде (флаг Toplevel ложный). Например. Вы строите некоторую библиотеку с глобальным API сферой, вы не хотите, чтобы она была удалена во время минимификации. По сути, лишь в некоторой степени «очевидно» мертвый (недоступный) код или неиспользованный в коде с близкими областями будет удален.
Вы, наверное, видели это в будущем – Terser может Удалите свой неиспользованный экспорт-S только в том случае, если WebPack оценил их таким образом, чтобы неиспользованные объявления могли быть легко обнаружены.
Для оптимизации WebPack в значительной степени опирается на статическую структуру синтаксиса модуля ES2015, то есть импорт и экспорт ключевых слов, и, на данный момент, не работает для других типов модулей. Мы можем увидеть это из источника.
ModuleConCatenationPlugin помещает код из файлов JavaScript в «куски» (в основном объединение кода из разных файлов в одну область). Он подносит под залог, если не может идентифицировать экспорт модуля Ecmascript.
Как вы можете видеть, мешающие интерфейсы модуля предотвращают Moduleconcatenationplugin (плагин для оптимизации) для выполнения своей работы.
Мы все любим и используем Вавилон для транспилирования современного синтаксиса ES в наших модулях, но в этой ситуации Вавилон-президент-Энв становится нашим плохим другом – по умолчанию модули переносятся к стандарту «CommonJS», и это именно то, что мы не хотим, когда объединяем несколько пакетов в одно приложение! Мы должны убедиться, что модули устанавливаем: False In Preset Config. WebPack может выполнять большинство своих оптимизаций только для модулей гармонии!
Не транспилируйте модули с настройкой Babel! Если вы это сделаете, WebPack будет рассматривать файлы как к капли, потеряв способность должным образом подготовить кусочки для Terser, чтобы отключить неиспользованный код.
Ну, технически это не так просто, конечно. WebPack выполняет тонну обработки на его стороне, чтобы построить конкатенированный код, он также отслеживает предоставленную и используемую экспорт-S на его стороне, прежде чем даже вызовать Terser, поэтому «комбинированный» код со всеми модулями все еще действителен для Terser Анкет Но еще раз – это не будет работать ни для чего еще, кроме статического синтаксиса модуля ES.
Под капотом
Под капюшоном идет довольно сложный процесс, начиная с прохождения WebPack.config.js компилятора и до создания пакета. Мы слегка коснемся тех части, которые интересны для нашего обсуждения.
Фаза компиляции – это то, где происходит все веселье, ниже вы можете увидеть его основные шаги.
В конечном счете, во время компиляции Graph WebPack создает график зависимости для входа, указанную в вашем webpack.config.js (или несколько из них, если конфигурация указывает несколько точек входа).
По сути, идея состоит в том, чтобы начать с точки входа, проходить зависимые модули, создавать их и соединять вместе – модули – это узлы, а зависимости – это соединения графика.
| (0) | Начать модуль входа (Compilation.js#1033) |
| (1) | Модуль сборки (Compilation.js#1111) |
| (2) | После зависимостей модуля процесса сборки (компиляция.js#1095) |
| (3) | Добавьте зависимости в модуль (Compilation.js#843) |
К Строительный модуль означает генерировать AST при извлечении всей необходимой информации (Export-S, Import-S и т. Д.). Webpack полагается на Acorn. Парицер (от acorn ), чтобы построить и обработать Ast.
Далее идет этап оптимизации.
FlagDependencyUsagePlugin идентифицирует ИСПОЛЬЗОВАНИЕ EXPORTS и назначить модуль Анкет
FlagDependencyUsAgePlugin крючков в фазу компиляции и идентифицирует используемые экспорта. По сути, идея состоит в том, чтобы найти то, что «модулея» импортирует из «ModuleB», чтобы установить его использованные экземпляры. Этот процесс требует большого количества рекурсивных переселений и «подсчета ссылок».
Как вы знаете, у Webpack есть труба плагинов, работающих на событиях, если вы хотите узнать больше, ознакомьтесь с моим другим сообщением Библиотека Tapable как ядро архитектуры WebPack Анкет
FlagDependencyUsagePlugin.js следует, что HarmonyImportDependencyParserPlugin.js Найден о использовании зависимостей.
| (1) | После обнаружения ImportSpecifier переменная будет помечена как «импортированный VAR» для дальнейшего отслеживания |
| (2) | Слушайте вызовы (вызов метода элемента AST), то есть WebPack является умным, импортированный метод не требуется, что означает, что он используется, он должен убедиться, что он также вызван |
| (3) | Называемый импортированный метод, обнаруженный и сохраненный как зависимость (позже будет находиться внутри использования Exports для импортированного модуля) |
Webpack – это умный, импортированный метод не требуется, что он используется, нам также нужно убедиться, что он также называется.
Еще раз, для того, чтобы это работало, импорт-S/Export-S должен оставаться в пакете (не транспилирован).
Интересные находки
Есть слишком много интересных вещей, которые я заметил в исходном коде WebPack, которые должны быть упомянуты. Это, вероятно, нужен отдельный пост.
Я выделю лишь некоторые из них.
Помните эту ошибку, когда вы впервые запускаете WebPack, но забыли установить пакет WebPack-Cli? Они не являются однопользовательщиками, поэтому WebPack предоставляет достаточно полезное руководство для пользователей о том, как его решить.
Просто попробуйте разрешить пакет, ошибки брошенных означает, что он не установлен!
Еще один довольно большой сюрприз, сколько независимых пакетов, зависит от Webpack. Буквально для всего:
1) Tapable Пакет для архитектуры, управляемой событиями 2) Терсер для минификации 3) Acorn Для обработки AST 4) Watchpack Чтобы посмотреть изменения файла
Это, очевидно, очень приятно, поэтому все они могут быть использованы повторно для разных целей в других инструментах!
Читать Интерактивная версия этого поста в моем блоге.
Оригинал: “https://dev.to/bogdanlyashenko/simple-mistake-to-ruin-webpack-bundle-optimization-5c7a”