Monitor and analyze the app

Why Your Bundle Needs Watching

Configuring webpack to produce the smallest possible output is only half the battle. The bundle needs continuous supervision — otherwise a single new dependency can silently double your app's size without anyone noticing. This article covers the tools that give you visibility into what your bundle contains and how it grows over time.

Real-Time Size Tracking During Development

webpack-dashboard replaces the standard webpack output with a richer interface showing dependency sizes, build progress, and other metrics.

The Modules section is where you'll spot problems quickly. When a large dependency gets added during development, it appears there immediately, letting you catch bloat before it ever reaches production. Install the package and register the plugin in your config:

npm install webpack-dashboard --save-dev

// webpack.config.js
const DashboardPlugin = require('webpack-dashboard/plugin');

module.exports = {
    plugins: [
    new DashboardPlugin(),
    ],
};

If you're running an Express-based dev server, use compiler.apply() instead:

compiler.apply(new DashboardPlugin());

Scroll through the Modules section to identify oversized libraries that might be worth swapping for lighter alternatives.

Enforcing Size Limits in CI

bundlesize guards against regression by failing builds when assets exceed configured thresholds. Integrate it with CI to get automatic size notifications on every push:

To set it up, you first need to establish realistic limits. After optimizing your app, run a production build and configure bundlesize in package.json:

// package.json
{
  "bundlesize": [
    {
      "path": "./dist/*"
    }
  ]
}

Run it with npx to see the gzipped size of every output file:

npx bundlesize

PASS  ./dist/icon256.6168aaac8461862eab7a.png: 10.89KB
PASS  ./dist/icon512.c3e073a4100bd0c28a86.png: 13.1KB
PASS  ./dist/main.0c8b617dfc40c2827ae3.js: 16.28KB
PASS  ./dist/vendor.ff9f7ea865884e6a84c8.js: 31.49KB

Take those numbers and add a 10-20% buffer to get your maximum allowed sizes. This margin accommodates normal development while still alerting you when growth gets out of hand.

Next, install bundlesize as a development dependency and update the bundlesize section in package.json with those concrete limits — note that asset types like images support per-file-type maximums:

npm install bundlesize --save-dev

// package.json
{
  "bundlesize": [
    {
      "path": "./dist/*.png",
      "maxSize": "16 kB",
    },
    {
      "path": "./dist/main.*.js",
      "maxSize": "20 kB",
    },
    {
      "path": "./dist/vendor.*.js",
      "maxSize": "35 kB",
    }
  ]
}   

Add a npm script to keep the check easy to invoke:

// package.json
{
  "scripts": {
    "check-size": "bundlesize"
  }
}

Configure your CI to execute npm run check-size on every push. For GitHub-hosted projects, consider the direct GitHub integration. From that point on, every build reports whether output files fit within the allowance:

Failures are just as visible:

For context on what size targets actually make sense for real users, Alex Russell has published an analysis of realistic performance budgets.

Visualizing Where the Space Goes

When you need to understand exactly what's occupying your bundle, webpack-bundle-analyzer produces a visual map of its contents:

Install the analyzer package and add its plugin to your webpack config before running the production build — the browser will open the stats page automatically:

npm install webpack-bundle-analyzer --save-dev

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin(),
  ],
};

The default view shows parsed file sizes. For a more user-accurate picture, switch to gzip sizes via the sidebar — gzip reflects what users actually download.

As you examine the visualization, watch for these patterns:

• Oversized dependencies. Ask whether a lighter replacement exists, such as Preact over React, or whether the library includes unused code that can be dropped — Moment.js is the classic example, since it bundles many locales that go unimported.
• Repeated libraries. If the same library shows up across multiple chunks, consolidate it using optimization.splitChunks.chunks (webpack 4) or CommonsChunkPlugin (webpack 3). Also check whether multiple versions of one library are present.
• Feature-overlapping tools. If two libraries do roughly the same job — moment against date-fns, or lodash against lodash-es — consolidate on one.

For a more detailed walkthrough of these patterns, take a look at Sean Larkin's reading of webpack bundles.

Keeping Your Bundle In Check

• Surf continuous size trends and catch new heavy dependencies with webpack-dashboard for development plus bundlesize for CI gates.
• When a deeper analysis is needed, webpack-bundle-analyzer shows you exactly which modules are driving bundle growth.