webpack/webpack-bundle-analyzer

Что это?

Ключевые возможности

• 01Интерактивная масштабируемая древовидная карта модулей бандла
• 02Работает как плагин webpack или отдельный CLI для файлов со статистикой
• 03Разбирает минифицированные бандлы и показывает реальные размеры модулей
• 04Показывает размеры stat, parsed, gzip, Brotli и Zstandard
• 05Выводит отчёт через HTTP-сервер, в виде статического HTML-отчёта или JSON-файла
• 06Фильтрует чанки на боковой панели или в контекстном меню

Сценарии использования

• Поиск крупных или случайно добавленных зависимостей в проекте на webpack
• Отслеживание изменений размера бандла в ходе оптимизации
• Анализ бандла по существующему файлу stats.json в CI или на сервере
• Создание статического отчёта о бандле, которым можно поделиться с командой

Быстрый старт

1. 1

   Установите плагин как dev-зависимость с помощью npm

   npm install --save-dev webpack-bundle-analyzer
2. 2

   Добавьте BundleAnalyzerPlugin в массив plugins конфигурации webpack и запустите webpack

Что важно знать

• !Анализируются только бандлы webpack, поэтому инструмент не поможет с результатами работы других сборщиков.

В подборках

Темы

Частые вопросы

Что такое webpack-bundle-analyzer?

Плагин для webpack и CLI, который показывает содержимое бандла в виде интерактивной масштабируемой древовидной карты и помогает найти самые объёмные модули. Webpack Bundle Analyzer помогает увидеть, что именно входит в результат сборки webpack. Он отображает каждый бандл в виде интерактивной масштабируемой древовидной карты: каждый прямоугольник соответствует модулю, поэтому самые объёмные части бандла легко заметить. Инструмент помогает находить модули, попавшие в сборку по ошибке, и решать, что оптимизировать.

webpack-bundle-analyzer можно использовать бесплатно? Какая у него лицензия?

webpack-bundle-analyzer распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.

webpack-bundle-analyzer всё ещё поддерживается?

Активно поддерживается. Последний коммит в webpack-bundle-analyzer — 6 нояб. 2026 г..

Для чего можно использовать webpack-bundle-analyzer?

Поиск крупных или случайно добавленных зависимостей в проекте на webpack Отслеживание изменений размера бандла в ходе оптимизации Анализ бандла по существующему файлу stats.json в CI или на сервере Создание статического отчёта о бандле, которым можно поделиться с командой

Как установить webpack-bundle-analyzer?

Установите плагин как dev-зависимость с помощью npm: npm install --save-dev webpack-bundle-analyzer Добавьте BundleAnalyzerPlugin в массив plugins конфигурации webpack и запустите webpack

Где скачать webpack-bundle-analyzer?

Исходный код и инструкции по установке — на GitHub: https://github.com/webpack/webpack-bundle-analyzer