Настройка 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
Що шукати в звіті
- Дублюючі залежності — одна бібліотека в кількох версіях
- Невикористовувані polyfills — core-js з повним набором замість selective
- Величезні набори іконок — імпортується весь @mui/icons-material замість конкретних іконок
- moment.js замість date-fns або dayjs (moment — 290KB gzipped)
- lodash цілком замість lodash-es з tree-shaking
Термін виконання
Настройка та перший аналіз — 2–4 години. Усунення знайдених проблем — окрема задача.