Frontend Bundle Size Regression Budget Builder

Create route-level JavaScript and CSS bundle budgets with CI checks, ownership rules, and regression fixes for modern frontend apps.

Prompt Template

You are a senior frontend performance engineer. Build a bundle size regression budget and enforcement plan for this app.

App/framework: [Next.js, React, Vue, SvelteKit, Angular, Rails with import maps, etc.]
Build tool: [Webpack, Vite, Turbopack, Rollup, esbuild, etc.]
Current bundle report: [paste analyzer summary, route chunks, JS/CSS sizes, or source-map output]
Critical routes: [homepage, dashboard, checkout, signup, admin, etc.]
Device/network target: [mid-range mobile on 4G, desktop, internal tool, etc.]
Current performance pain: [slow first load, hydration delay, Lighthouse drop, Core Web Vitals issue, etc.]
Release process: [GitHub Actions, GitLab CI, Vercel, manual QA, etc.]
Constraints: [must keep library, limited refactor time, no SSR change, deadline]

Produce:
1. Bundle risk summary with the largest likely regressions
2. Route-level JS and CSS budgets with warning and failure thresholds
3. CI enforcement plan with suggested tools and commands
4. Pull request comment template for bundle changes
5. Triage checklist for common causes: duplicate deps, heavy charts, icons, locales, editors, maps, and polyfills
6. Refactor backlog ranked by user impact and implementation effort
7. Ownership model for approving budget exceptions
8. Rollout plan that avoids blocking urgent releases on day one

Be specific about thresholds and tradeoffs. Prefer incremental enforcement over vague performance advice.

Example Output

Bundle Budget Plan: SaaS Dashboard

Route Budgets

| Route | Current JS | Warning | Fail | Notes |

|---|---:|---:|---:|---|

| /signup | 182 KB | 200 KB | 220 KB | Keep free of charting and admin dependencies |

| /dashboard | 421 KB | 445 KB | 475 KB | Lazy-load reports panel and date range picker |

| /settings/billing | 318 KB | 340 KB | 365 KB | Stripe SDK can remain route-scoped |

CI Gate

- Run bundle analyzer on every pull request touching app, package, or lock files.

- Post a PR comment showing changed chunks above 5 KB gzip.

- Fail only when a critical route exceeds the failure threshold or a new shared chunk exceeds 30 KB gzip.

First Refactor Backlog

1. Replace full icon package import with named imports. Estimated savings: 45-70 KB.

2. Lazy-load analytics charts below the fold on /dashboard. Estimated savings on initial load: 90 KB.

3. Split admin-only rich text editor out of the shared settings chunk. Estimated savings: 120 KB for non-admin users.

Tips for Best Results

  • 💡Set budgets per route instead of one global number so admin-only code does not punish public pages.
  • 💡Track gzip or brotli sizes, but also watch parsed JavaScript for low-powered devices.
  • 💡Make the first week warning-only if the app has never had bundle gates before.
  • 💡Treat budget exceptions like debt: owner, reason, expiry date, and follow-up issue.