Performance
Bundle budgets: cut a route under budget and keep it there
Reading about bundle budgets is not the same as dragging a real route under one. Take a bloated app, profile what the user actually downloads, apply the reduction hierarchy until a route fits its budget, then make the budget stick with a CI gate and a RUM panel — with evidence at every step.
Turn the unit’s mental model into a reproducible engineering loop: analyze the bundle, cut bytes off the critical path in priority order, neutralize the third-party tax, enforce the budget in CI, and verify the real-user win with before/after Core Web Vitals.
Take a route that ships an oversized JS bundle (your own app or the starter below) and bring it under a defensible per-route budget — proving each reduction with the analyzer and field-representative LCP/INP numbers, then gating it in CI so it cannot regress.
- A before/after table: gzip'd transfer, uncompressed JS, LCP, and INP — all measured under the same 4× CPU-throttled mid-range mobile profile, not estimated and not from an unthrottled laptop.
- The analyzer treemap clearly shows the route's chunk shrinking and foreign-route / dead modules gone (re-analyzed, not assumed).
- The size-limit gate is committed and demonstrably fails a deliberately over-budget PR, then passes once the addition is split or the budget is formally raised.
- A one-paragraph write-up naming the lever used for each top module and why splitting/shaking ranked above compression and tuning.
- At least one third-party script is shown removed from the main thread, with the before/after main-thread time it occupied.
- Add a budget-raise protocol doc and a quarterly 10% ratchet so the budget tightens over time instead of drifting upward; show one worked raise PR with justification and sign-off.
- Wire 103 Early Hints (or modulepreload) for the critical chunk and font, and measure the LCP delta at P95; verify in the Network panel that the resource starts before the HTML finishes.
- Add SRI integrity hashes to all third-party script tags and a CSP script-src allow-list, then show a script from an unlisted origin being refused by the browser.
- Verify HTTP/3 RFC 9218 priorities are honored end-to-end: inspect the Network panel Priority column, and if the CDN ignores them, document the misconfiguration and its measured cost to the critical chunk's arrival.
This is the loop you will run on every bloated route: analyze first, cut bytes off the critical path in priority order (split, then lazy-load, then shake, then vendor-split, then compress), neutralize the third-party tax, enforce the budget with a CI gate, and verify with before/after Core Web Vitals on a throttled mobile profile — then keep RUM watching for the drift that synthetic tests miss. Doing it once on a real route makes the production version muscle memory.