发布

  • [OPIK-6066] [FE] perf: lazy-load heaviest non-critical page routes

    frostbyte_neo 发布于 2026-04-21 15:31:55 +00:00

    Converts the heaviest page imports in v1/router.tsx and v2/router.tsx
    from static imports to React.lazy() so each page becomes its own chunk,
    loaded only on navigation. Follows the SMEFlowPage precedent in both
    routers.

    Pages converted:

    • v1: PlaygroundPage, PromptPage, CompareExperimentsPage, AlertsRouteWrapper
    • v2: PlaygroundPage, CompareExperimentsPage, AlertsRouteWrapper

    TracesPage intentionally kept eager — it's on the critical path and
    lazy-loading would cause a visible Loader flash on most sessions.

    Measured impact (production build, dist/assets):

    • V1App chunk: 932 KB -> 801 KB (-131 KB, -14%)
    • V2App chunk: 1074 KB -> 955 KB (-119 KB, -11%)
    • Combined initial App payload: -250 KB
    • Total JS across all chunks: +52 KB (+0.4%) — Rollup duplicates some
      small shared modules across chunks; acceptable tax for the initial
      payload reduction.

    App-level <Suspense fallback={}> in WorkspaceVersionGate
    covers the fallback for all new lazy route components — no new
    Suspense boundaries needed.

    Co-Authored-By: Claude Opus 4.7 (1M context) noreply@anthropic.com

    下载附件