Визуализатор размера бандла Webpack

• Мгновенная визуализация бандла Webpack: визуализируйте размеры бандла webpack сразу в браузере — без загрузки на сервер и инструментов сборки. Наш визуализатор размера бандла webpack разбирает JSON статистики и строит интерактивные полосы размеров для пакетов, модулей и чанков.
• Безопасный онлайн-визуализатор размера бандла Webpack: ваш JSON статистики webpack не покидает устройство при использовании этого визуализатора. Обработка на 100 % на стороне клиента означает полную приватность — без облачного хранения, без серверных логов и без раскрытия исходного кода.
• Визуализатор размера бандла Webpack без установки: визуализируйте размеры бандла webpack прямо в браузере без npm-пакетов, без настройки webpack-bundle-analyzer и без аккаунта. Этот бесплатный визуализатор размера бандла webpack работает в любом современном браузере.
• Рекомендации по оптимизации и анализ пакетов: получайте конкретные рекомендации по оптимизации для главных зависимостей — moment.js, lodash, d3, MUI, chart.js и других. Смотрите состав бандла (node_modules против кода приложения) и вклад каждого пакета в размер.

• Контроль бюджета размера бандла: используйте визуализатор размера бандла webpack, чтобы перед каждым релизом проверить, что бандл укладывается в бюджет производительности. Видьте крупнейших «виновников» и находите регрессии заранее.
• Аудит и замена зависимостей: используйте визуализатор размера бандла webpack, чтобы найти раздутые зависимости вроде moment.js (290 КБ) или lodash (71 КБ). Панель рекомендаций предлагает более лёгкие альтернативы для самых частых случаев.
• Проверка работы tree-shaking: используйте визуализатор размера бандла webpack, чтобы убедиться, что tree-shaking работает корректно. Если пакет показывает множество мелких модулей вместо одного крупного бандла, значит tree-shaking активен и работает как ожидается.
• Оптимизация Core Web Vitals: используйте визуализатор размера бандла webpack, чтобы найти самые крупные JavaScript-бандлы, влияющие на метрики LCP и FID. Уменьшение размера основного бандла напрямую улучшает Time to Interactive и First Input Delay.
• Отчёты о производительности для клиентов: используйте визуализатор размера бандла webpack, чтобы подготовить данные о составе бандла для отчётов о производительности. Покажите соотношение node_modules и кода приложения, крупнейшие пакеты по размеру и конкретные возможности оптимизации.
• Анализ разделения кода: используйте визуализатор размера бандла webpack, чтобы проанализировать размеры чанков и найти возможности для code splitting. Представление по чанкам показывает, какие чанки самые крупные и сколько модулей в каждом из них.

Визуализатор размера бандла webpack разбирает JSON-вывод API статистики webpack и наглядно показывает, какие модули и пакеты дают наибольший вклад в размер вашего бандла. Наш визуализатор размера бандла webpack читает массивы modules, chunks и assets из JSON статистики webpack и группирует размеры модулей по имени пакета — показывая, какие именно зависимости node_modules самые крупные. Весь анализ выполняется полностью в браузере на чистом JavaScript — без загрузки на сервер и без установки webpack-bundle-analyzer.

1. 1 Создайте JSON статистики webpack: выполните webpack --json > stats.json или next build --debug . Затем вставьте содержимое stats.json в поле ввода или загрузите файл напрямую.
2. 2 Мгновенный анализ в браузере: нажмите «Визуализировать бандл», и визуализатор размера бандла webpack разберёт JSON, сгруппирует размеры модулей по имени пакета и построит полосы размеров для пакетов, модулей и чанков. Данные не отправляются на сервер.
3. 3 Изучите визуализацию и рекомендации: переключайтесь между представлениями по пакетам, модулям и чанкам. Панель рекомендаций по оптимизации даёт конкретные советы для самых крупных зависимостей вашего бандла.

• Состав бандла: наглядная полоса, показывающая соотношение node_modules (сторонние зависимости) и кода приложения — большинство бандлов на 70–90 % состоят из node_modules, и это главная цель оптимизации.
• Представление по пакетам: все пакеты node_modules, сгруппированные по имени и отсортированные по общему размеру, — показывает, какие зависимости вносят наибольший вклад в бандл.
• Представление по модулям: топ-20 отдельных модулей по размеру — полезно, чтобы найти конкретные неожиданно крупные файлы.
• Представление по чанкам: все чанки webpack, отсортированные по размеру, — полезно для поиска возможностей code splitting и понимания структуры бандла.

Для webpack: выполните webpack --json > stats.json или добавьте {" "} в конфигурацию webpack. Для Next.js: выполните next build --debug и найдите файл статистики в .next/. Для Create React App: используйте source-map-explorer или eject, чтобы получить доступ к конфигурации webpack. Визуализатор размера бандла webpack принимает любой JSON статистики webpack — формат одинаков для webpack 4 и webpack 5.