Bundle Size Monitoring and Regression Detection

Bundle Size Monitoring

Performance budgets define limits, but monitoring tracks how close you are to those limits over time. Without monitoring, page weight gradually increases as features are added — a phenomenon called performance regression or bundle bloat.

Common Monitoring Tools

Tool	Purpose	Output
webpack-bundle-analyzer	Visualize bundle contents	Interactive treemap
source-map-explorer	Analyze source map sizes	Treemap from source maps
size-limit	Track size in CI	CLI/CI reports
bundlephobia	Check npm package sizes	Web interface
Import Cost (VS Code)	Show import size inline	Editor hints

Setting Up webpack-bundle-analyzer

// next.config.js (Next.js example)
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer({
  // ... your config
});

Run ANALYZE=true npm run build to generate an interactive treemap showing every module in your bundles.

What to Watch For

Common bundle size regressions:

1. Accidental full-library imports — import _ from 'lodash' (70 KB) vs import debounce from 'lodash/debounce' (1 KB)
2. Duplicate dependencies — Two versions of the same library due to transitive dependencies
3. Dead code — Feature flags removed but feature code still in the bundle
4. Polyfills for supported browsers — core-js polyfills for features all target browsers support
5. Development-only code — Logger, debug tools left in production build

Historical Tracking

Track bundle size as a metric over time, similar to code coverage:

Version  Date       JS Bundle  CSS Bundle  Total
1.0.0    2024-01    180 KB     35 KB       215 KB
1.1.0    2024-02    195 KB     38 KB       233 KB (+8%)
1.2.0    2024-03    210 KB     36 KB       246 KB (+6%)
1.3.0    2024-04    240 KB     42 KB       282 KB (+15%) ⚠️

The jump from 1.2.0 to 1.3.0 signals a regression that needs investigation.

Automated Alerts

Set up alerts for:

• Bundle size increase > 10 KB in a single PR
• Bundle size increase > 5% per release
• New npm dependency added (require justification)
• Duplicate package versions detected

Bundle Composition Audits

Run monthly bundle composition audits:

1. Generate the bundle analyzer treemap
2. List the top 10 modules by size
3. For each: Is it necessary? Is there a lighter alternative? Can it be code-split?
4. Document decisions and track action items