Setting Up Bundle Analyzer for a Website
Bundle Analyzer is a tool for visualizing JavaScript bundle composition. It shows which modules take up space and helps make optimization decisions.
Tools
webpack-bundle-analyzer — for Webpack/CRA/Next.js without custom Vite. source-map-explorer — analyzes source maps, works with any bundler including Vite and Rollup.
Installing webpack-bundle-analyzer
npm install --save-dev webpack-bundle-analyzer
For Next.js add via @next/bundle-analyzer:
// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true' })
module.exports = withBundleAnalyzer({ /* config */ })
Run: ANALYZE=true next build
Installing source-map-explorer
npm install --save-dev source-map-explorer
Build with source maps and analyze:
vite build -- --sourcemap
npx source-map-explorer dist/assets/*.js
What to Look for in Report
- Duplicate dependencies — same library in multiple versions
- Unused polyfills — full core-js instead of selective
- Huge icon sets — entire @mui/icons-material imported instead of specific icons
- moment.js instead of date-fns or dayjs (moment is 290KB gzipped)
- lodash whole instead of lodash-es with tree-shaking
Execution Time
Setup and initial analysis — 2–4 hours. Fixing found issues — separate task.