VextJS
  • English

      • Performance Budgets

      Performance budgets keep the React hydration path measurable.

      Size Report

      When frontend.build.diagnostics.performanceReport 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

      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

      FailureFirst check
      Initial JS too largeShared vendor chunk and app entry imports.
      Route JS too largePage-specific imports and heavy widgets.
      App-owned JS too largeComponents that can lazy-load after hydration.
      External runtime missingexternalRuntime mapping and CDN availability.

      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.