Visualize vite bundle
npm install vite-bundle-visualizerVisualize vite bundle, like webpack-bundle-analyzer.
``consoleIn your vite project's root
$ npx vite-bundle-visualizerThen open stats.html in browser
console
$ vite-bundle-visualizer --helpvite-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
--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
$3
#### 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-bunlde-visualizer -t json
$ vite-bundle-visualizer -t raw-data
`#### List
Output yml file with all the data
console
$ vite-bundle-visualizer -t list
``