> For the complete documentation index, see [llms.txt](https://gpeterhand.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://gpeterhand.gitbook.io/react/sborka-proekta-1/webpack-bundle-analyzer.md).

# webpack-bundle-analyzer

Предназначен для визуального анализа сборки

**Источники**

* [Webpack - Bundle Analysis](https://webpack.js.org/guides/code-splitting/#bundle-analysis)

Устанавливаем [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) и [cross-env](https://github.com/kentcdodds/cross-env)

> yarn add webpack-bundle-analyzer cross-env

В файл **package.json** в секцию "scripts" добавляем

```
"analyze": "cross-env NODE_ENV=analyze webpack --mode production"
```

В файл **webpack.config.js** добавляем:

```javascript
// ...
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')

// ...
const plugins ...

if (process.env.NODE_ENV === 'analyze') {
  plugins.push(new BundleAnalyzerPlugin())
}

// ...
```

Запускаем:

> yarn analyze

В браузере откроется страница с визуальным  анализом сборки:

:![](https://yury72.gitbooks.io/react-universal-tutorial/assets/import4.png)