vite-bundle-analyzer

What is vite-bundle-analyzer?

The vite-bundle-analyzer is a plugin for Vite that helps developers analyze the size and composition of their JavaScript bundles. It provides a visual representation of the bundle contents, making it easier to identify large dependencies and optimize the build process.

What are vite-bundle-analyzer's main functionalities?

Bundle Visualization

This feature allows you to visualize your bundle in different formats such as treemap, sunburst, or network. The visualizer plugin generates an HTML file that opens automatically in your default browser, providing an interactive view of your bundle's composition.

import { defineConfig } from 'vite';
import { visualizer } from 'vite-bundle-analyzer';

export default defineConfig({
  plugins: [
    visualizer({
      open: true,
      filename: 'bundle-analysis.html',
      template: 'treemap' // or 'sunburst', 'network'
    })
  ]
});

Custom Report Generation

This feature allows you to generate a custom report that includes additional information such as gzip and brotli sizes. This can be useful for understanding the impact of compression on your bundle size.

import { defineConfig } from 'vite';
import { visualizer } from 'vite-bundle-analyzer';

export default defineConfig({
  plugins: [
    visualizer({
      open: true,
      filename: 'custom-report.html',
      gzipSize: true,
      brotliSize: true
    })
  ]
});

Other packages similar to vite-bundle-analyzer

webpack-bundle-analyzer

webpack-bundle-analyzer is a popular tool for visualizing the size of webpack output files with an interactive zoomable treemap. It is similar to vite-bundle-analyzer but specifically designed for use with webpack, offering a wide range of customization options and detailed insights into bundle composition.

rollup-plugin-visualizer

rollup-plugin-visualizer is a plugin for Rollup that provides a similar bundle analysis and visualization functionality. It generates an interactive treemap visualization of the bundle, helping developers optimize their Rollup builds. It is comparable to vite-bundle-analyzer but tailored for Rollup users.

README

Vite Bundle Analyzer

A bundle analyzer for Vite, Rollup, and Rolldown that visualizes bundle size with an interactive treemap.

[!WARNING] Vite enables minification by default. The parsed size may appear larger than actual size because bundle info from Rollup isn't compressed. Rolldown support is experimental.

Installation

npm install vite-bundle-analyzer -D
# or
yarn add vite-bundle-analyzer -D
# or
pnpm add vite-bundle-analyzer -D

Usage

Vite

import { defineConfig } from 'vite'
import { analyzer } from 'vite-bundle-analyzer'

export default defineConfig({
  plugins: [
    analyzer()
  ]
})

Rollup

import { adapter } from 'vite-bundle-analyzer'
import { analyzer } from 'vite-bundle-analyzer'

export default {
  plugins: [
    adapter(analyzer())
  ]
}

Rolldown Plugin (Experimental)

import { unstableRolldownAdapter } from 'vite-bundle-analyzer'
import { analyzer } from 'vite-bundle-analyzer'

export default {
  plugins: [
    unstableRolldownAdapter(analyzer())
  ]
}

Configuration

Option	Type	Default	Description
analyzerMode	'server' | 'static' | 'json' | function	'server'	Analysis output mode
fileName	string | function	'stats'	Output filename (without extension)
reportTitle	string	'Vite Bundle Analyzer'	Report page title
gzipOptions	Record<string, any>	{}	Gzip compression options (see zlib module)
brotliOptions	Record<string, any>	{}	Brotli compression options
analyzerPort	number | 'auto'	8888	Server port
openAnalyzer	boolean	true	Auto-open browser (server/static mode only)
defaultSizes	'stat' | 'gzip' | 'brotli'	'stat'	Default size metric
summary	boolean	true	Show summary in console
enabled	boolean	true	Enable/disable plugin
include	string | RegExp | Array<string | RegExp>	[]	Include patterns
exclude	string | RegExp | Array<string | RegExp>	[]	Exclude patterns
pathFormatter	(path: string, defaultWd: string) => string	undefined	Formatting Paths

CLI

npx vite-bundle-analyzer

# With options
npx vite-bundle-analyzer --help

Common Issues

Empty Chunk Sizes

If chunk sizes appear empty, check for plugins that break source maps (e.g., @vitejs/plugin-legacy). The analyzer relies on source maps for accurate size calculation.

Vite-based Frameworks

For frameworks built on Vite (VitePress, Remix, Qwik), use analyzerMode: 'server' for accurate results due to multiple build instances.

Static Mode Without Server

When analyzerMode: 'static' and openAnalyzer: false, no development server is created.

API Integration

import { SSE, createServer, injectHTMLTag, openBrowser, renderView } from 'vite-bundle-analyzer'

// Create custom server
const server = createServer()
server.get('/', async (c) => {
  const html = await renderView(data, { title: 'Custom Analyzer', mode: 'stat' })
  c.res.writeHead(200, { 'Content-Type': 'text/html' })
  c.res.write(html)
  c.res.end()
})
server.listen(3000)

Debug

# Vite
vite build --debug

# Environment variable
ANALYZE_DEBUG=true npm run build

Related

• ROLLDOWN
• Q&A
• CHANGELOG

Contributors

Sponsors

Credits

• Geist UI
• The friend who proposed this idea.
• All contributors and sponsors

License

MIT

Changelog

1.2.3

• Static Mode: openAnalyzer now opens HTML reports via file protocol instead of starting a server.