Когда бандл весит 2+ МБ, а LCP — 4 секунды
JavaScript-бандл весом 2+ МБ напрямую бьёт по Core Web Vitals: LCP проседает до 4 секунд, INP страдает, конверсия падает на 15–25%. Причина — дублирующиеся зависимости, неиспользуемые полифилы и гигантские библиотеки вроде moment.js (290 КБ) или @mui/icons-material (150 КБ только за импорт одной иконки). Вместо того чтобы гадать, что раздувает сборку, используйте точные инструменты.
Мы настраиваем webpack-bundle-analyzer и source-map-explorer под ваш проект. Получаете интерактивную карту зависимостей и таблицу исходных файлов. Дальше — конкретный план: замена library, настройка tree-shaking, динамические импорты. За 2–4 часа выявляем 5–10 проблем и сокращаем бандл на 30–50%.
Сравнение инструментов
| Характеристика | webpack-bundle-analyzer | source-map-explorer |
|---|---|---|
| Поддержка сборщиков | Webpack, CRA, Next.js | Любые (source maps) |
| Визуализация | Интерактивная UV-диаграмма | Табличное представление |
| Глубина анализа | Показывает модули и их размер | Показывает исходные файлы |
| Интеграция | Плагин в конфиг | Запуск после сборки |
Пример отчёта source-map-explorer
$ npx source-map-explorer dist/assets/*.js Module Size main.js 1.2 MB vendor.js 900 KB ... Как выбрать инструмент?
Если проект на Webpack или Next.js — используйте webpack-bundle-analyzer для наглядной карты. Если сборщик другой (Vite, Rollup, Parcel) — source-map-explorer универсален. Часто применяем оба: сначала общий анализ через source-map-explorer, затем детальный через webpack-bundle-analyzer. В 90% проектов достаточно одного из них.
Пошаговый процесс настройки
Установка webpack-bundle-analyzer
npm install --save-dev webpack-bundle-analyzer Для Next.js через @next/bundle-analyzer:
// next.config.js const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true' }) module.exports = withBundleAnalyzer({ /* config */ }) Запуск: ANALYZE=true next build.
Установка source-map-explorer
npm install --save-dev source-map-explorer Сборка с source maps и анализ:
vite build -- --sourcemap npx source-map-explorer dist/assets/*.js Что искать в отчёте
| Тип проблемы | Пример | Решение |
|---|---|---|
| Дублирующиеся зависимости | Две версии React | Настроить resolve.alias |
| Неиспользуемые полифилы | core-js целиком | Импортировать только нужные |
| Огромные иконочные сеты | @mui/icons-material | Импортировать конкретные иконки |
| Тяжёлые библиотеки | moment.js (290 KB) | Заменить на date-fns (13 KB) — разница в 22 раза |
Почему стоит настроить bundle analyzer сейчас?
Каждая лишняя килобайта в бандле ухудшает Core Web Vitals. Согласно HTTP Archive, медианный размер JavaScript на десктопе — 500 КБ, на мобильных — 400 КБ. Превышение порога ведёт к потере конверсии. Мы гарантируем выявление основных «жирных» зависимостей за 2–4 часа. Типичные результаты: бандл уменьшается с 2.5 МБ до 1.5 МБ (на 40%), TTI падает с 5с до 2.5с, LCP — с 3с до 1.8с. Конверсия растёт на 15–25%. Средняя экономия на трафике и хостинге составляет до 25 000 ₽ в месяц для проекта с умеренной посещаемостью.
Что входит в работу
- Установка и конфигурация выбранных анализаторов (webpack-bundle-analyzer, source-map-explorer или оба).
- Генерация интерактивного отчёта с визуализацией зависимостей.
- Детальный письменный анализ с указанием «жирных» модулей, дублей и неиспользуемого кода.
- Рекомендации по оптимизации с оценкой ожидаемого сокращения размера.
- Внедрение согласованных изменений (tree-shaking, динамические импорты, замена библиотек).
- Итоговый замер метрик (LCP, TTI, размер бандла) и сравнение с исходными.
- Предоставление документации и доступ к отчёту.
- Обучение команды работе с анализаторами для самостоятельного мониторинга.
Процесс работы
- Первичный аудит — сбор метрик и текущего размера бандла.
- Настройка анализаторов — установка и конфигурация инструментов.
- Генерация отчёта — интерактивная карта или таблица.
- Выявление проблем — поиск дублей, неиспользуемого кода, тяжёлых библиотек.
- Рекомендации — конкретные шаги с оценкой эффекта.
- Внедрение оптимизаций — tree-shaking, динамические импорты, замена библиотек.
- Контрольный замер — сравнение метрик до и после.
Сроки: от 2 часов для базового анализа до 1–2 дней для полного обследования проекта. Стоимость рассчитывается индивидуально. Средняя экономия на трафике после оптимизации — до 30% (≈ 40 000 ₽ в месяц для проекта с 10 000 посетителей).
Полезные советы
- Используйте библиотеки с ES-модулями (lodash-es, date-fns) для эффективного tree-shaking.
- Добавьте автоматические проверки в CI — например,
bundlesizeилиwebpack-bundle-analyzerв pipeline. - Регулярно пересматривайте зависимости — многие проекты годами хранят устаревшие библиотеки.
Закажите анализ бандла сейчас — получите готовый отчёт с планом оптимизации в течение дня. Оценим ваш проект за 1 день: свяжитесь для консультации.
Для дополнительной информации: webpack-bundle-analyzer и @next/bundle-analyzer.