Webpack формирует итоговую компиляцию в виде набора взаимосвязанных сущностей: модулей, чанков и ассетов. Анализ размера модулей начинается с понимания того, как именно эти сущности отражаются в статистике сборки.
Модуль в Webpack представляет отдельный файл или логическую единицу кода, включённую в граф зависимостей. Каждый модуль получает идентификатор, исходный путь, список зависимостей и вклад в итоговые чанки. Размер модуля в контексте сборки не всегда равен размеру исходного файла: трансформации Babel, минификация, tree-shaking и объединение кода изменяют итоговую величину.
Чанк объединяет множество модулей в единицу загрузки. Ассет является
финальным файлом, который создаётся на выходе (например,
.js или .css). Именно ассеты доставляются в
браузер, поэтому анализ размера всегда должен учитывать цепочку «модуль
→ чанк → ассет».
Основой анализа выступает stats.json, формируемый
Webpack при включении параметра статистики:
webpack --json > stats.jsonstats: 'normal' | 'verbose' | 'detailed'Внутри статистики ключевыми структурами являются:
modules — список модулей с информацией о размере и
зависимостиchunks — распределение модулей по чанкамassets — итоговые файлы и их размерыentrypoints — точки входа и их составchildren — вложенные компиляции (например, при
MultiCompiler)Размер модуля в статистике представлен несколькими метриками:
size — исходный размерbuilt — результат обработки loader’амиcodeGenerated — итог после генерации кодаЭти значения позволяют отделить исходный вклад модуля от фактического веса в бандле.
Анализ числовых данных из stats.json затруднён без
визуализации. Используются специализированные инструменты:
webpack-bundle-analyzer — строит интерактивное дерево
модулей с отображением вкладов в размерsource-map-explorer — анализирует итоговые source map и
показывает реальный вклад исходных файловsize-plugin — фиксирует изменения размера при каждой
сборкеbundle-stats — сравнение размеров между сборкамиwebpack-bundle-analyzer опирается на
stats.json и отображает иерархию:
entrypoint
chunk
module
Размер каждого узла рассчитывается как сумма вложенных модулей, что позволяет выявлять непропорционально тяжёлые зависимости.
Граф модулей представляет собой ориентированный ациклический граф,
где вершины — модули, а рёбра — зависимости
import/require.
Анализ размера в этом графе включает:
Особое значение имеет транзитивный размер: модуль может быть маленьким сам по себе, но включать тяжёлую зависимость, увеличивая итоговый вес.
Tree shaking опирается на статический анализ ES Modules. Включение механизма происходит через:
optimization.usedExports: truemode: productionWebpack помечает экспортируемые символы как используемые или неиспользуемые. При корректной конфигурации неиспользуемый код удаляется на этапе Terser.
Эффективность tree shaking зависит от:
Ошибочная конфигурация приводит к включению всего модуля, даже при использовании одного символа.
Флаг sideEffects в package.json влияет на
возможность удаления кода:
false — весь модуль считается безопасным для удаления
неиспользуемых частейПри отсутствии корректного sideEffects Webpack сохраняет
модули целиком, увеличивая итоговый размер чанков.
Особенно критично это для библиотек с CSS, polyfills и глобальными регистрациями.
Module Concatenation Plugin объединяет модули в единый контекст исполнения, уменьшая накладные расходы обёрток:
Влияние на размер выражается не только в уменьшении байтов, но и в улучшении compressibility (gzip/brotli).
splitChunks напрямую влияет на распределение
размеров:
Ключевые параметры:
splitChunks.cacheGroupssplitChunks.chunkssplitChunks.minSizesplitChunks.maxInitialRequestsОшибочная настройка приводит к:
import() создаёт отдельные чанки, влияющие на
распределение размера. В анализе это проявляется как:
Размер модуля в async chunk не исчезает, но переносится из критического пути загрузки в отложенную загрузку.
Типовые источники увеличения размера:
Анализ включает проверку:
Дубликаты возникают при:
Webpack отображает такие случаи как несколько модулей с одинаковым содержимым, но разными идентификаторами. Это приводит к линейному росту размера бандла.
Webpack поддерживает механизм ограничения размера:
performance.maxAssetSizeperformance.maxEntrypointSizeperformance.hintsПри превышении порогов сборка выдаёт предупреждения, основанные на итоговых ассетах.
Это не измеряет модули напрямую, но позволяет косвенно контролировать рост графа зависимостей.
Source maps не влияют на production bundle, но искажают восприятие размера при анализе:
При анализе размеров используется production-сборка без source maps или с отдельным анализом через source-map-explorer.
Использование contenthash влияет на стратегию
анализа:
Размер модулей становится стабильной метрикой только при контролируемом графе зависимостей.
Последовательность анализа размера модулей строится вокруг нескольких уровней:
Корректная интерпретация требует сопоставления всех уровней, так как оптимизация на одном уровне может ухудшить другой (например, уменьшение chunk size увеличивает duplication).