> For the complete documentation index, see [llms.txt](https://olga-f.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://olga-f.gitbook.io/react/performance/analyzing-bundle-sizes.md).

# Analyzing Bundle Sizes

Webpack Bundle Analyzer is a webpack plugin which helps you visualize the size of your bundles with an interactive zoom-able tree-map.

* Realize what's *really* inside your bundle
* Find out what modules make up the most of their size
* Find modules that got there by mistake
* Optimize it!

```
npm install --save-dev webpack-bundle-analyzer
```

in your *webpack.config.js*

```jsx
const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer')
```

```jsx
module.exports = Object.assign({}, configuration, {
  mode: 'production',
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
    }),
  ],
})
```

|    |
| -: |

and run the production build. The plugin will open the stats page in a browser.

```jsx
npm run build
```