vite-bundle-analyzer weekly downloads statistics

<p align="center"> <img src="https://socialify.git.ci/nonzzz/vite-bundle-analyzer/image?font=KoHo&language=1&logo=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F65625612%3Fs%3D200%26v%3D4&name=1&owner=1&pattern=Circuit%20Board&theme=Auto" alt="vite-bundle-analyzer" width="640" height="320" /> </p> <p align="center"> <a href="https://npmjs.com/package/vite-bundle-analyzer"> <img src="https://img.shields.io/npm/v/vite-bundle-analyzer.svg"> </a> <a href="https://npmjs.com/package/vite-bundle-analyzer"> <img src="https://img.shields.io/npm/dm/vite-bundle-analyzer.svg"> </a> <a href='https://github.com/sindresorhus/awesome'> <img src='https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg' alt='Awesome'> </a> </p> <p align="center"> <img src="https://cdn.jsdelivr.net/gh/nonzzz/vite-bundle-analyzer@latest/imgs/now.gif" width="640" height="320" /> </p>

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

Plugins only work during the build phase.

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

# If you're using rolldown-vite pls using the following command

npx vite-bundle-analyzer -e=rolldown-vite

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…