Give each route a size budget

How to do it

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.

Example

// .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' },
];

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)

How to check

Import a large library into one route on a branch. The build fails and names that route and its budget.