Webpack Bundle Analyzer

Using Webpack Bundle Analyzer

Webpack Bundle Analyzer

by John Vincent

Posted on October 19, 2018

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

Webpack Bundle Analyzer

Webpack Bundle Analyzer


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


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


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

Webpack Analyzer

Open in a browser


Load the statistics json file and the analysis is performed.