webpack-bundle-analyzer Guide

webpack-bundle-analyzer generates an interactive treemap of your JavaScript bundle, showing exactly what's inside each chunk. Use it to find bloated dependencies, duplicate packages, and dead code costing your users download time.

Installation & Basic Setup

npm install --save-dev webpack-bundle-analyzer

// webpack.config.js
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
  // ... other config
  plugins: [
    // Opens browser with interactive treemap
    new BundleAnalyzerPlugin({
      analyzerMode: 'server',       // 'server' | 'static' | 'json' | 'disabled'
      analyzerPort: 8888,
      openAnalyzer: true,
      generateStatsFile: true,      // also write stats.json
      statsFilename: 'stats.json',
    }),
  ],
};

npm Script Integration

// package.json — only run analyzer when needed
{
  "scripts": {
    "build": "webpack --mode production",
    "build:analyze": "ANALYZE=true webpack --mode production",
    "analyze": "webpack-bundle-analyzer dist/stats.json"
  }
}

// webpack.config.js — conditional plugin
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

const plugins = [];
if (process.env.ANALYZE) {
  plugins.push(new BundleAnalyzerPlugin());
}

Size Metrics Explained

Common Bundle Bloat & Fixes

Code Splitting with Dynamic Imports

// Before: static import bundles everything together
import AdminDashboard from './AdminDashboard';

// After: dynamic import creates separate chunk
const AdminDashboard = React.lazy(() => import('./AdminDashboard'));

// Route-level splitting with React Router
const routes = [
  {
    path: '/dashboard',
    component: React.lazy(() => import('./pages/Dashboard')),
  },
  {
    path: '/admin',
    component: React.lazy(
      () => import(/* webpackChunkName: "admin" */ './pages/Admin')
    ),
  },
];

// webpack.config.js: vendor chunk splitting
optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        priority: 10,
      },
      react: {
        test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
        name: 'react',
        priority: 20,
      },
    },
  },
}