React Webpack Bundle Analyzer

This article describes how to set up a Webpack bundle analyzer and what to look for in the report generated.

With webpack bundle analyzer, you get visualizations of what’s in your webpack bundle. When you see what’s in your bundle, you can optimize it to make it smaller.

The goal here is to help you better understand what webpack is actually doing by seeing the exact changes that occur to a production build when you make small changes to your application.

1. Install the webpack bundle analyzer as a dev dependency.

# NPM
npm install --save-dev webpack-bundle-analyzer
# Yarn
yarn add -D webpack-bundle-analyzer

2. Add “ — stats” at the end of the build script and add “analyze” script.

3. Execute “npm run build” and “npm run analyze”.

After executing analyze command, a new window will open with the report.

This is how a report of my blog that you are reading right now looks like:

Webpack recommends that a bundle should be a maximum of 250kb unminified. If you see larger bundles than that, use code splitting to split them up and maybe lazy load some of them.

If you see some large libraries in there, look if they are (tree-shakable). With tree shaking, you don’t have to bundle the whole library, but only the part you use.