Webpack Bundle Analyzer CLI
Webpack Bundle Analyzer CLI читает статистику сборки и показывает вклад модулей в размер JavaScript-бандлов до и после сжатия.
- 12 654 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- CLI читает файлы сборки и может открыть через HTTP отчет с путями и названиями модулей.
Установка
В терминале, через SkillFoxx CLI
npx skillfoxx add cli/webpack-bundle-analyzer-cliОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- CLI читает файлы сборки и может открыть через HTTP отчет с путями и названиями модулей.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
В браузерном отчете каждый модуль занимает прямоугольник, площадь которого соответствует выбранной метрике размера. Пользователь раскрывает крупную область и видит, какая зависимость занимает место. Боковая панель и контекстное меню скрывают ненужные части сборки, чтобы сосредоточиться на выбранном файле. Самостоятельный CLI читает JSON статистики Webpack и готовые файлы бандлов. Отчет можно просматривать на локальном HTTP-сервере или сохранить в HTML для ревью. Анализатор показывает состав сборки, но не меняет импорты и не измеряет скорость страницы; эти проверки разработчик проводит отдельно.
Для кого. Фронтенд-инженерам Webpack, которые разбирают рост сборки и хотят видеть вклад отдельных модулей.
Подходит, если
- После обновления зависимости бандл вырос, и причина скрыта среди модулей.
- В готовой сборке обнаружился пакет, который команда не ожидала включать.
- Коллега обсуждает размер сборки в ревью и просит отчет, открывающийся без сервера.
- Минификация уменьшила исходники, и разработчик сравнивает готовый код со сжатой версией.
Не подходит, если
- Нужны измерения LCP или времени выполнения JavaScript вместо состава сборки.
- Нет статистики Webpack и соответствующих файлов бандлов.
- Отчет должен автоматически исправить импорты и разделение кода.
Пример запроса к агенту
Изучи stats.json и соответствующую сборку, найди крупнейшие модули и предложи проверки без изменения зависимостей.Ограничения
Для полного отчета нужны `stats.json` и файлы бандлов из одной сборки; без файлов на диске анализатор может показать только `stat`. При сравнении двух отчетов выберите одинаковую метрику: `parsed` и `gzip` измеряют разные представления кода. В серверном режиме CLI слушает адрес `127.0.0.1` по умолчанию; другой адрес может открыть отчет сети. Карта содержит названия модулей и пути проекта, поэтому перед передачей HTML убедитесь, что получатель вправе видеть эти сведения.
Как отключить. Завершите процесс анализатора и уберите плагин из сборки, если он добавлен. Сохраненные HTML- и JSON-отчеты удаляются отдельно.
Частые вопросы
Есть ли CLI без плагина?
Да. Например, `webpack-bundle-analyzer bundle/output/path/stats.json` откроет отчет по готовой статистике. Подставьте путь к своей сборке.
Чем `parsed` отличается от `stat`?
`stat` берется из статистики Webpack и отражает размер до преобразований, включая минификацию. `parsed` показывает готовый код после этих преобразований, но до gzip или Brotli. Если сборка минифицирована, это уже учтено в `parsed`.
Как сохранить отчет в HTML?
Добавьте к CLI-вызову `--mode static`. Анализатор создаст `report.html` без HTTP-сервера; другой путь задается через `--report`. Для файла статистики и каталога бандлов используйте одну и ту же сборку.
Показывает ли gzip сетевую скорость?
Нет. Это размер кода после сжатия gzip. Скорость передачи и производительность страницы измеряются отдельно.
Что делать с некорректным stats.json в PowerShell?
Создайте файл без BOM: `webpack --profile --json | Out-file 'stats.json' -Encoding OEM`. Это команда из README для PowerShell.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
CLI-инструментыRockpack Starter, CLI для React, готовит шаблоны приложений и библиотек на Webpack с TypeScript и расширяемой сборкой.
56 сниппетов на JavaScript для замеров веб-производительности: агент запускает их через навыки, MCP или CLI и разбирает результат
Chef для Bitrix
Chef
CLI для сборки, тестирования, линтинга и диагностики JS-расширений Bitrix с поддержкой TypeScript
Сканер доступности для агентов и CI: рендерит страницу в Chromium с axe-core или линтит исходники React, Vue и Angular.
Набор скиллов для аудита качества сайта: производительность, Core Web Vitals, доступность, SEO и лучшие практики по данным Lighthouse
designlang
designlang (design-extract)
CLI и MCP-сервер, который читает готовый сайт и достает из него дизайн-систему: токены DTCG, конфиг Tailwind, переменные Figma и брендбук
Коротко о README
Параметр `--exclude` исключает файлы из отчета по регулярному выражению. Каталог готовых бандлов можно передать отдельно от пути к JSON статистики.