Анализатор webpack stats
Найдите, какие пакеты и модули занимают больше всего места в webpack-бандле.
Анализатор webpack stats
Сгенерируйте stats.json из webpack (`webpack --json > stats.json`, или добавьте `stats: { modules: true }` в конфиг), и вставьте его сюда, чтобы увидеть, какие именно пакеты и модули раздувают ваш бандл. Это самый быстрый способ ответить на вопрос "почему мой бандл такой большой" без установки плагина bundle-analyzer или пересборки со специальными флагами — отчет читает JSON, который у вас уже есть.
Группируйте отчет по пакетам node_modules, чтобы увидеть, какая зависимость стоит дороже всего; по папкам, чтобы увидеть, какая часть вашего исходного кода самая тяжелая; или оставьте его без группировки, чтобы проверить отдельные модули один за другим. Опция «строк для отображения» ограничивает длинный отчет самыми крупными нарушителями; доля размера показывает размер каждой строки в контексте всего бандла; а если ваш stats.json содержит поле сжатого размера для каждого модуля (gzipSize или sizeGzip), включение колонки сжатого размера показывает оба числа рядом. Фильтрация по точке входа или названию чанка ограничивает всё одним бандлом, что полезно, когда приложение имеет более одного выходного файла.
Инструмент также отмечает пакеты, которые появляются в нескольких путях установки node_modules — это часто означает, что две зависимости требуют несовместимые версии одной библиотеки, и webpack заканчивает тем, что отправляет обе копии. Эти строки помечены в выводе, чтобы их было легко заметить даже в длинном отчете. Выберите табличный вывод для удобочитаемого отчета или CSV для вставки в электронную таблицу, если вы отслеживаете размер бандла с течением времени.
Всё работает в вашем браузере: stats.json анализируется локально и никогда не загружается никуда, поэтому его безопасно использовать с проприетарной кодовой базой. Скопируйте результат, загрузите его как .txt-файл или отправьте прямо в ввод другого инструмента, чтобы продолжить работу.