You can get a bundle size report just by using Vue CLI and nothing else.
Keeping track of bundle sizes is a best practice. You need to know what gets delivered to users so that you can try to optimize stuff and take corrective steps to decrease chunk sizes, tree-shake where you can etc. All these steps will hopefully lead to smaller bundles or smaller incremental files that should speed up your application (at least in perception!).
A common way of keeping track of bundle sizes is using webpack-bundle-analyzer
. Install this package from NPM and configure a few things in vue.config.js
.
At least this is the conventional wisdom given out by many. But, you do not need a separate install of bundle analyser - just do a bundle size analysis using Vue CLI and the built-in webpack-bundle-analyzer
does its job quite well.
First, add the following to script
section in your package.json
.
|
|
Run report.
|
|
And, rejoice!
See more parameters that give you even more power on Vue CLI docs.