Use tools like webpack-bundle-analyzer, Vite's rollup-plugin-visualizer, or source-map-explorer to visualize bundle composition. Reduce size by removing unused code, using smaller alternatives, lazy loading, and tree shaking.
Analysis Tools:
Common Size Issues:
Reduction Strategies:
// vite.config.js with visualizer
import { defineConfig } from 'vite';
import { visualizer } from 'rollup-plugin-visualizer';
export default defineConfig({
plugins: [
visualizer({
filename: 'dist/stats.html',
open: true,
gzipSize: true,
brotliSize: true,
}),
],
});
// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin({
analyzerMode: 'static',
reportFilename: 'bundle-report.html',
}),
],
};
// package.json scripts
{
"scripts": {
"analyze": "ANALYZE=true npm run build",
"analyze:source": "source-map-explorer 'dist/**/*.js'"
}
}