Visualize vite bundle, like webpack-bundle-analyzer.
A wrapper of 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 thevite-bundle-visualizer
.(@wparad)
# 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
$ vite-bundle-visualizer --help
vite-bundle-visualizer
Usage:
$ vite-bundle-visualizer <command> [options]
Options:
-h, --help Display this message
--template -t <template> Template to use, options are "raw-data" (JSON), "treemap", "list", "sunburst" and "network" (default: treemap)
--output -o <filepath> Output file path, should be "**/*.html" or "**/*.json" (default: /var/folders/lb/9tn84c8x42nctvbs1fb3vxd40000gn/T/tmp-20782-nmqZuvXaZNxh/stats.html)
--open <open> Should open browser after generated, except when template is "json" (default: true)
--config -c <file> 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 <mode> set env mode, defaults to production
$ vite-bundle-visualizer
$ vite-bundle-visualizer -t sunburst
$ vite-bundle-visualizer -t network
Output raw data (JSON) of stats
# @deprecated vite-bundle-visualizer -t json
$ vite-bundle-visualizer -t raw-data
Output yml file with all the data
$ vite-bundle-visualizer -t list