https://github.com/nonzzz/vite-bundle-analyzer
bundle analyzer for vite
https://github.com/nonzzz/vite-bundle-analyzer
analyzer bundle-analyzer rollup-plugin visualizer vite-plugin
Last synced: 25 days ago
JSON representation
bundle analyzer for vite
- Host: GitHub
- URL: https://github.com/nonzzz/vite-bundle-analyzer
- Owner: nonzzz
- License: mit
- Created: 2023-07-28T09:44:06.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2025-04-29T09:51:34.000Z (10 months ago)
- Last Synced: 2025-04-29T10:22:01.590Z (10 months ago)
- Topics: analyzer, bundle-analyzer, rollup-plugin, visualizer, vite-plugin
- Language: TypeScript
- Homepage: https://nonzzz.github.io/vite-bundle-analyzer/
- Size: 20 MB
- Stars: 248
- Watchers: 2
- Forks: 12
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- fucking-awesome-vite - vite-bundle-analyzer - Utility that represents bundles as an interactive treemap. (Plugins / Framework-agnostic Plugins)
- awesome-vite - vite-bundle-analyzer - Utility that represents bundles as an interactive treemap. (Plugins / Framework-agnostic Plugins)
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
```bash
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
```js
import { defineConfig } from 'vite'
import { analyzer } from 'vite-bundle-analyzer'
export default defineConfig({
plugins: [
analyzer()
]
})
```
### Rollup
```js
import { adapter } from 'vite-bundle-analyzer'
import { analyzer } from 'vite-bundle-analyzer'
export default {
plugins: [
adapter(analyzer())
]
}
```
### Rolldown Plugin (Experimental)
```js
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` | `{}` | Gzip compression options (see zlib module) |
| `brotliOptions` | `Record` | `{}` | 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` | `[]` | Include patterns |
| `exclude` | `string \| RegExp \| Array` | `[]` | Exclude patterns |
| `pathFormatter` | `(path: string, defaultWd: string) => string` | `undefined` | Formatting Paths |
## CLI
```bash
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
```ts
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
```bash
# Vite
vite build --debug
# Environment variable
ANALYZE_DEBUG=true npm run build
```
## Related
- [ROLLDOWN](./ROLLDOWN.md)
- [Q&A](./Q&A.md)
- [CHANGELOG](./CHANGELOG.md)
## Contributors
## Sponsors
## Credits
- [Geist UI](https://github.com/geist-org/geist-ui)
- The friend who proposed this idea.
- All contributors and sponsors
## License
[MIT](./LICENSE)