Skip to main content

Bundle size monitoring

DebugBear tracks the size of your JavaScript or CSS bundles. This works even if small parts of the URL change, e.g the file hash.

Read this article to learn more about how to make bundle size tracking work well on your website and when you'll get a notification.

Example JavaScript bundle size chart

How to make bundle size tracking work​

To track the size of individual bundles DebugBear needs to be able to identify a specific bundle even if the exact URL varies. Here are some bundle paths where this works well:

  • /public/app.be7b81d1b57d6aa781ec.js
  • /js/v13/app.js

In each case only one part of the URL changes, and then bundle name app stays consistent.

These are examples of paths that make bundle monitoring difficult:

  • /public/2kOpB8Eds7z.js
  • /js/5.d49b738d7f72bc78a00f.js

In both cases there is no recognizable bundle name. The second case is very common when doing bundle splitting with Webpack. By default webpack will use a number as the bundle name.

To achieve a more consistent bundle name you can use a webpackChunkName comment when loading the chunk in your code:

import(/* webpackChunkName: "main-app" */ "./main-app")

Notifications​

DebugBear will alert you if the size of your bundles change. Learn more about different types of notifications.

For page alerts you'll get a notification if the total JavaScript size on the page changes by more than 10KB.

Bundle alerts will notify you about any changes over 200B. However, common third parties are muted by default, so you don't get an alert whenever the Intercom becomes 3kB bigger.

Last updated on