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)