Checking your Vue application’s bundle size
The bundle size is the total size of your Vue application that will be loaded by the browser. The larger the size, the slower your application loads.
There are two different ways to check your Vue bundle size when working with the Vue framework.
Let’s go through each of these methods in more detail.
Generating a report
You can use the build command with the --report flag to generate your application report. This method gives a visual representation of all the packages used and each bundle size. Further, with the information generated from this visual report, you can figure out how to replace any package that takes up more space and size than expected.
Also, note that the build command will only build a report when webpack-bundle-analyzer is installed.
To generate a report for your application, follow these steps:
- First, install the package with the following command:
npm install webpack-bundle-analyzer...
