Bundle size using Vue CLI

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.

"build-report": "vue-cli-service build --report",

Run report.

npm run build-report

And, rejoice!

See more parameters that give you even more power on Vue CLI docs.

comments powered by Disqus