This stuff ends up sprayed everywhere, so let's create a reference document.

Webpack Bundle Analyzer

Webpack Bundle Analyzer

Install

npm i --save-dev webpack-bundle-analyzer

Usage

Add to package.json scripts

"statistics": "webpack --mode development --profile --json > statistics.json && webpack-bundle-analyzer statistics.json dist"

"production-statistics": "rm -rf dist && NODE_ENV=production webpack --mode production --profile --json > production-statistics.json && webpack-bundle-analyzer production-statistics.json dist",

which creates files statistics.json for development mode and production-statistics.json for production mode. These files are used to create the analysis in a separate browser window.

These files can be very large. Thus add them to .gitignore

Webpack Visualizer

Open in a browser

https://chrisbateman.github.io/webpack-visualizer/

Drag and drop the statistics json file and a graph will be produced showing usage by module.

Webpack Analyzer

Open in a browser

https://webpack.github.io/analyse/

Load the statistics json file and the analysis is performed.