vite-bundle-explorer

vite-bundle-explorer

A powerful bundle analyzer and visualizer tool for Vite and any other Rollup-compatible bundler.

Analyze your bundle size, detect duplicate dependencies, and visualize module graphs to optimize your application's performance.

Features

• ⚡ Multi-Bundler Support – Works with any Rollup-compatible bundler like vite, rollup, rolldown, and tsdown.
• 📦 Universal – Supports both Applications and Libraries.
• 📊 Visual Insights – Interactive Chunk Treemap and Module Import Graph.
• 🔍 Deep Analysis – Detect duplicated dependencies, trace dependencies to identify exactly why module is bundled.
• 🛡️ Build Checks – Run checks during the build process.

Example report

Usage

Install the package as a development dependency

npm install -D vite-bundle-explorer
# yarn add -D vite-bundle-explorer
# pnpm add -D vite-bundle-explorer

Register the plugin (config name depends on your bundler, here is an example for vite).

import { defineConfig } from 'vite';
import { statsPlugin } from 'vite-bundle-explorer/plugin';

export default defineConfig({
  plugins: [
    // ...other plugins
    statsPlugin(),
  ],
});

Once your build is complete, you can use CLI or any static file server to see the interactive visualization.

npx vite-bundle-explorer bundle-report

Configuration

You can pass options to stats plugin

export default defineConfig({
  plugins: [
    statsPlugin({
      // ...options
    })
  ]
});

Option	Type	Default	Description
enabled	boolean	true	Disable stats collection and report generation. This option is disabled automatically for vite dev mode
reportCompressedSize	boolean	true	Calculate compressed size of chunks. May slightly increase build time.
reportDirectoryName	string	"bundle-report"	Name of the output directory
emitHtml	boolean	true	Generate a standalone interactive HTML report
emitJson	boolean	false	Generate raw stats.json file
check	boolean	true	Run report checks during the build process
failOnWarning	boolean	false	Cancel build if bundle has any report warnings

CI/CD Integration

You can use vite-bundle-explorer to run checks in your CI pipeline.

To fail the build when duplicate dependencies or other warnings are found, set failOnWarning to true:

export default defineConfig({
  plugins: [
    statsPlugin({
      failOnWarning: true,
    }),
  ],
});