# Visualizing the Size of your Vue/React/Angular Bundles

Knowing exactly what and how much each individual bundle in your project is used can help you optimize your project. If your web application is packaged with [Webpack](https://webpack.js.org/), there are a few ways you can analyze your bundles.

## Analyzing Bundles

There is a handful of third-party packages that will allow you to get a more detailed view of exactly what modules in your application are being used and how significant they are to your project in terms of size. “[**webpack-bundle-analyzer**](https://www.npmjs.com/package/webpack-bundle-analyzer)” is one that I use frequently. This plugin renders and opens a webpage with information about your bundles after you run a build. It also gives you three separate views: parsed, stat, and gzipped.

webpack-bundle-analyzer rendered page after running “vue-cli-service build — mode production”

### How to use

Open a terminal with the path to your application and execute the command **npm install — save-dev webpack-bundle-analyzer.**

Next, locate the **webpack.config.js** file within your project and add this to the plugins property.

```javascript
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
   plugins: [\
      new BundleAnalyzerPlugin()\
   ]
}
```

After this is added, build your project and when it is finished you will see a rendered page load up in your browser.

_If you are using Vue CLI with a Vue application, the Vue CLI already has a build configuration packaged with the webpack-bundle-analyzer. Just run vue-cli-service build –report and it will generate a report.html file within your /dist folder._

### Report Detail

In the report, you should notice three levels of bundle sizes.

- Stat – Obtained from [webpack’s stats object](https://webpack.js.org/configuration/stats/), the “input” size of your files, before any transformations like minification.
- Parsed – This is the “output” size of your files including minification and any other plugins that are augmenting the output files.
- Gzipped – The size of your bundles after running them through gzip compression.

Check out the [official npm page](https://www.npmjs.com/package/webpack-bundle-analyzer) for the “webpack-bundle-analyzer” to see all of the options and properties you could use to get more information about your bundles.