Настройка Bundle Analyzer для сайта
Bundle Analyzer — инструмент визуализации состава JavaScript-бандла. Позволяет увидеть, какие модули занимают место, и принять решения об оптимизации.
Инструменты
webpack-bundle-analyzer — для Webpack/CRA/Next.js без кастомного Vite. source-map-explorer — анализирует source maps, подходит для любого сборщика включая Vite и Rollup.
Установка 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
Что искать в отчёте
- Дублирующиеся зависимости — одна библиотека в нескольких версиях
- Неиспользуемые полифилы — core-js с полным набором вместо selective
- Огромные иконочные сеты — импортируется весь @mui/icons-material вместо конкретных иконок
- moment.js вместо date-fns или dayjs (moment — 290KB gzipped)
- lodash целиком вместо lodash-es с tree-shaking
Срок выполнения
Настройка и первичный анализ — 2–4 часа. Устранение найденных проблем — отдельная задача.