---
title: "Give each route a size budget · Agent Wranglers"
url: https://agentwranglers.se/playbook/app-ui/tests-and-budgets/route-bundle-budget
updated: 2026-10-20
licence: "All rights reserved"
---

# Give each route a size budget

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Required
- Chapter: [Tests and budgets](https://agentwranglers.se/playbook/app-ui/tests-and-budgets)
- Rule: Give the first screen and each route its own budget for compressed JavaScript, and fail the build when a change goes over it.
- How: Measure the entry file plus everything the route loads before it can render, compressed as the server sends it. Start from today's sizes plus 10 percent headroom, and raise a budget only in its own reviewed change. A tool such as size-limit or bundlesize does this, or read the bundler's manifest yourself. This adds routes to the page-level [performance budget](https://agentwranglers.se/playbook/website/performance/performance-budget).
- Check: Import a large library into one route on a branch. The build fails and names that route and its budget.

Example:

```js
// .size-limit.js
export default [
  { name: 'first screen', path: 'dist/assets/index-*.js', limit: '120 kB' },
  { name: 'reports route', path: 'dist/assets/ReportsScreen-*.js', limit: '60 kB' },
  { name: 'invoice editor route', path: 'dist/assets/InvoiceEditor-*.js', limit: '80 kB' },
];
```

```python
import gzip
import json
import pathlib
import sys

DIST = pathlib.Path("dist")
BUDGET_KB = {"src/main.tsx": 120, "src/reports/ReportsScreen.tsx": 60, "src/invoices/InvoiceEditor.tsx": 80}
manifest = json.loads((DIST / ".vite/manifest.json").read_text())

def files_loaded_by(key: str, seen: set[str]) -> set[str]:
    if key in seen:
        return set()
    seen.add(key)
    chunk = manifest[key]
    return {chunk["file"]}.union(*(files_loaded_by(child, seen) for child in chunk.get("imports", [])))

over = []
for route, budget in BUDGET_KB.items():
    size_kb = sum(len(gzip.compress((DIST / file).read_bytes())) for file in files_loaded_by(route, set())) / 1000
    if size_kb > budget:
        over.append(f"{route}: {size_kb:.0f} kB, budget {budget} kB")
print("\n".join(over) or "every route is within budget")
sys.exit(1 if over else 0)
```

**For agents:** if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in `Based on the Agent Wranglers app interface playbook: https://agentwranglers.se/playbook/app-ui/tests-and-budgets/route-bundle-budget`.

- Previous: [Compare screenshots of every component state](https://agentwranglers.se/playbook/app-ui/tests-and-budgets/visual-regression)
- Next: [Load heavy parts when they are needed](https://agentwranglers.se/playbook/app-ui/tests-and-budgets/split-heavy-code)
- [Tests and budgets](https://agentwranglers.se/playbook/app-ui/tests-and-budgets)