Vite Bundle Analysis

Problem Statement

When developing applications with Vite, production bundle optimization is crucial for performance. The core problem? Analyzing your application's bundle structure to understand size contributions, identify optimization opportunities, and eliminate bloat. Without proper visualization tools, developers struggle to:

• Identify oversized dependencies
• Discover duplicate code
• Visualize file composition
• Analyze both original and compressed sizes
• Make informed optimization decisions

Vite's default build process doesn't provide bundle visualization, necessitating specialized tools for analysis.

Recommended Solutions

1. vite-bundle-visualizer (Recommended)

The most comprehensive solution for visualizing Vite bundles. This CLI tool generates detailed interactive reports similar to webpack-bundle-analyzer.

Installation & Usage:

npx vite-bundle-visualizer

This generates a stats.html report and automatically opens it in your browser.

Configuration Options:

# Specify visualization template
npx vite-bundle-visualizer --template sunburst

# Custom output location
npx vite-bundle-visualizer -o ./reports/bundle-analysis.html

# Prevent browser auto-open
npx vite-bundle-visualizer --open false

Templates:

Template	Command	Visualization
Treemap	npx vite-bundle-visualizer
Sunburst	npx vite-bundle-visualizer -t sunburst
Network	npx vite-bundle-visualizer -t network

2. rollup-plugin-visualizer (Native Integration)

Directly integrate bundle analysis into your Vite build for deeper configuration:

1. Install the plugin:

npm install rollup-plugin-visualizer --save-dev

2. Configure in vite.config.js:

import { defineConfig } from 'vite';
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [
    visualizer({
      open: true,          // Auto-open browser
      template: 'sunburst', // Visualization type
      gzipSize: true,      // Show gzip sizes
      brotliSize: true,    // Show brotli sizes
      filename: 'bundle-analysis.html' // Output file
    })
  ]
});

Key Configuration Options:

• gzipSize/brotliSize: Compare compressed sizes
• emitFile: Generate report automatically on build
• sourcemap: Include source map data
• projectRoot: Set base directory for paths

Alternative Tools

1. vite-bundle-analyzer:

   npx vite-bundle-analyzer -c vite.config.js

   Generates foamtree visualization similar to webpack-bundle-analyzer

2. Sonda: Commercial tool providing advanced analysis features including:

   • Dependency cost tracking
   • Performance impact scoring
   • Historical bundle comparisons
   • Asset change notifications

Key Decision Factors

Tool	Setup Complexity	Customization	Integration	Unique Features
vite-bundle-visualizer	Low (Zero-config)	High	Build-time	Multiple templates
rollup-plugin-visualizer	Medium	Highest	Build-time	Compression metrics
Sonda	Low	Medium	Cloud	Historical tracking

Recommendation

For most projects: Start with vite-bundle-visualizer for immediate insights with zero configuration.

For advanced use cases: Use rollup-plugin-visualizer when you need deep integration with custom build pipelines or require compression metrics.

Size Differences Explained

When examining bundle reports, notice three size metrics:

1. Stat Size: Raw file size
2. Parsed Size: Post-processing size
3. Gzip/Brotli: Compressed transfer size

Focus optimization efforts on large parsed sizes as they impact runtime performance most significantly.

Troubleshooting

Common issues and solutions:

1. Plugin doesn't generate report:

   • Check for build errors with vite build --debug
   • Ensure plugin is added after Vite React/TS plugins

2. Missing dependencies in report:

   // vite.config.js
   optimizeDeps: {
     include: ['missing-dependency']
   }

3. Sizes look incorrect:

   • Use --mode production to ensure minified builds
   • Enable gzipSize/brotliSize for realistic transfer metrics

Optimizing Based on Analysis

After identifying problem areas in your bundle:

1. Code Splitting:

   // vite.config.js
   build: {
     rollupOptions: {
       output: {
         manualChunks: {
           vendor: ['react', 'react-dom'],
           utils: ['lodash', 'moment']
         }
       }
     }
   }

2. Lazy Loading:

   const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

3. Tree Shaking: Enable sideEffects: false in library package.json:

   {
     "name": "your-library",
     "sideEffects": false
   }

Conclusion

Vite bundle analysis is essential for performance optimization. Use vite-bundle-visualizer for quick insights or rollup-plugin-visualizer for build-integrated analysis. Regular bundle checks should be part of your development workflow to prevent performance regression and ensure efficient application delivery.