Bundle Size Analyzer
Visualize and analyze your JavaScript bundle composition to optimize load times
Quick Example
Generate Stats File

Webpack

// Generate stats file with webpack
// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      generateStatsFile: true,
      statsFilename: 'stats.json',
    })
  ]
};

// Or using CLI
npx webpack --json > stats.json

Vite

// Generate stats with Vite
// vite.config.js
import { visualizer } from 'rollup-plugin-visualizer';

export default {
  plugins: [
    visualizer({
      filename: 'stats.html',
      open: true,
      gzipSize: true,
    })
  ],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          utils: ['lodash', 'axios'],
        }
      }
    }
  }
};
Bundle Optimization Tips

• Use code splitting to break large bundles into smaller chunks

• Lazy load routes and components that aren't immediately needed

• Remove unused dependencies and tree-shake imports

• Use dynamic imports for heavy libraries (e.g., charts, editors)

• Enable compression (Gzip or Brotli) on your server

• Replace large libraries with smaller alternatives (e.g., date-fns instead of moment)