#Performance Budgets

Performance budgets keep the React hydration path measurable.

#Size Report

When frontend.build.diagnostics.sizeReport is enabled, Vext writes:

dist/client/size-report.json

The report includes:

• raw size
• gzip size
• brotli size
• initial JS
• route initial JS
• app-owned assets
• external runtime groups

Top-level initialJs* values represent the largest complete first-load closure across generated pages, including shared chunks transitively imported by the browser entry. Deferred modules—such as other route pages and error fallbacks—are excluded until navigation or a render failure loads them. Use routes[] to inspect each route's own closure.

When frontend.build.diagnostics.performanceReport is enabled, the report also includes route-level initial JS metrics. When it is disabled, SSR route preload metadata is still generated in render-manifest.json, but route-level byte metrics are omitted from build reports.

#Budget Fields

frontend: {
  build: {
    budgets: {
      maxInitialJsBrotliBytes: 60_000,
      maxRouteInitialJsBrotliBytes: 80_000,
      maxAppOwnedInitialJsBrotliBytes: 40_000,
    },
  },
}

Compressed budgets better reflect transfer cost than raw byte limits.

#Fixing a Budget Failure

#Recommended Practice

Start with warning budgets while a product is still moving fast. Turn them into blocking budgets for release branches once route baselines are stable.

Keep budget numbers in config, not in CI scripts, so local build and CI enforce the same contract.