Monitor and analyze the app

Even when you configure webpack to make the app as small as possible, it’s still important to keep
track of it and know what it includes. Otherwise, you can install a dependency that will make the
app twice as large – and won’t even notice it!

or using compiler.apply() if you’re using an Express-based dev server:

compiler.apply(new DashboardPlugin());

Feel free to play with the dashboard to find the probable places for improvement! For example,
scroll through the Modules section to find what libraries are too large and could be replaced with
smaller alternatives.

bundlesize

bundlesize verifies that webpack assets don’t exceed
the specified sizes. Integrate it with a CI to get notified when the app becomes too large:

To configure it:

Find out the maximum sizes

Optimize the app to make it as small as possible. Run the production build.

Add the bundlesize section into package.json with the following
content:

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

By default, the stats page shows the size of parsed files (i.e., of files as they appear in
the bundle). You’ll likely want to compare gzip sizes since that’s closer to what real users
experience; use the sidebar on the left to switch the sizes.

Note: If you use the
ModuleConcatenationPlugin, it might
merge a part of modules in the webpack-bundle-analyzer output, making the report less detailed. If
you use this plugin, disable it during the analysis.

Here’s what to look for in the report:

Large dependencies. Why are they so large? Are there smaller alternatives (e.g., Preact
instead of React)? Do you use all the code it includes (e.g., Moment.js includes a lot of locales
that are often not used and could be dropped)?

Duplicated dependencies. Do you see the same library repeating in multiple files? (Use, e.g.,
the optimization.splitChunks.chunks option – in webpack 4 – or the CommonsChunkPlugin –
in webpack 3 – to move it into a common file.) Or does the bundle have multiple versions
of the same library?

Similar dependencies. Are there similar libraries that do approximately the same job? (E.g.
moment and date-fns, or lodash and lodash-es.) Try sticking with a single tool.