https://github.com/kusstar/vite-bundle-visualizer
CLI for visualizing your vite project bundle.
https://github.com/kusstar/vite-bundle-visualizer
bundle-analyzer bundle-visualizer cli vite
Last synced: 11 days ago
JSON representation
CLI for visualizing your vite project bundle.
- Host: GitHub
- URL: https://github.com/kusstar/vite-bundle-visualizer
- Owner: KusStar
- License: mit
- Created: 2022-07-20T08:31:05.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-10-27T15:32:18.000Z (6 months ago)
- Last Synced: 2025-03-30T08:32:38.289Z (25 days ago)
- Topics: bundle-analyzer, bundle-visualizer, cli, vite
- Language: JavaScript
- Homepage:
- Size: 861 KB
- Stars: 386
- Watchers: 1
- Forks: 7
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vite-bundle-visualizer
Visualize vite bundle, like [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer).
A wrapper of [rollup-plugin-visualizer](https://github.com/btd/rollup-plugin-visualizer).
> In most scenarios you shouldn't need this library, the recommended solution is to add
`rollup-plugin-visualizer` directly to your vite configuration. However, if you are using
vite, and want to run the visualizer directly from your command line via a CLI command
instead without needing to build your site, now you have a solution with the
`vite-bundle-visualizer`.([@wparad](https://github.com/wparad))
## Usage
```console
# In your vite project's root
$ npx vite-bundle-visualizer
# Then open stats.html in browser
# Use specified vite config file
$ npx vite-bundle-visualizer -c your.config.js
```
```console
$ vite-bundle-visualizer --help
vite-bundle-visualizer
Usage:
$ vite-bundle-visualizer [options]
Options:
-h, --help Display this message
--template -t Template to use, options are "raw-data" (JSON), "treemap", "list", "sunburst" and "network" (default: treemap)
--output -o Output file path, should be "**/*.html" or "**/*.json" (default: /var/folders/lb/9tn84c8x42nctvbs1fb3vxd40000gn/T/tmp-20782-nmqZuvXaZNxh/stats.html)
--open Should open browser after generated, except when template is "json" (default: true)
--config -c Use specified vite config file
--entry --input -i Use specified entry file, default is "index.html"
--sourcemap use sourcemap to calculate sizes of modules. By idea it will present more accurate results, defaults is false
--mode -m set env mode, defaults to production
```
## Screenshots
### Visualizer Templates
#### Treemap
```console
$ vite-bundle-visualizer
```
#### Sunburst
```console
$ vite-bundle-visualizer -t sunburst
```
#### Network
```console
$ vite-bundle-visualizer -t network
```
#### Raw data
Output raw data (JSON) of stats
```console
# @deprecated vite-bundle-visualizer -t json
$ vite-bundle-visualizer -t raw-data
```
[demo/react/stats.json](./demo/react/stats.json)
#### List
Output yml file with all the data
```console
$ vite-bundle-visualizer -t list
```
[demo/react/stats.yml](./demo/react/stats.yml)
## Dependencies
- [rollup-plugin-visualizer](https://github.com/btd/rollup-plugin-visualizer)
## License
[MIT](LICENSE)