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.jsonVite
// 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)