Using Bundle Analyzers to Find Performance Issues ​

When your site feels sluggish, the culprit is often hiding in plain sight: your JavaScript bundle. Bundle analyzers give you a visual map of exactly what's bloating your build.

Setup ​

For Vite projects, rollup-plugin-visualizer is the go-to choice:

bash
npm install -D rollup-plugin-visualizer
js
// vite.config.js
import { visualizer } from "rollup-plugin-visualizer";

export default {
  plugins: [
    visualizer({
      open: true,
      filename: "stats.html",
      gzipSize: true,
    }),
  ],
};

Run your build and an interactive treemap opens in your browser.

Reading the Output ​

The visualizer displays your bundle as nested rectangles. Bigger rectangles mean bigger file sizes. Look for:

  • Unexpectedly large dependencies - Is a date library taking up 200KB?
  • Duplicate packages - Multiple versions of the same library
  • Heavy pages - Components that pull in massive dependencies

The Fix: Lazy Loading ​

Once you identify heavy pages, lazy load them. In Vue:

js
// Before
import HeavyComponent from "./HeavyComponent.vue";

// After
const HeavyComponent = () => import("./HeavyComponent.vue");

This splits the component into its own chunk, loaded only when needed.

Results ​

On this site, the analyzer revealed Three.js was being bundled into the main chunk. Moving the 3D background to a lazy-loaded component dropped the initial bundle size significantly. The shapes still appear instantly for most users since the chunk loads in parallel, but the critical rendering path is no longer blocked.

Bundle analyzers turn guesswork into data. Run one on your project - you might be surprised what you find.