Skip to content

Lazy route components for code splitting #217

Description

@uhyo

From a library audit (see AUDIT.md on branch claude/library-audit-sxpugz, §3.7).

Motivation

All route components are statically imported into the route table, so the entire app ships in one bundle. React.lazy works today but has no integration with the navigation lifecycle — the chunk starts downloading only when the route renders, after the navigation transition has begun.

Proposal

Accept a lazy component in route definitions:

route({
  path: "/reports",
  loader: reportsLoader,
  component: () => import("./ReportsPage"), // or lazy: ...
});

Design notes:

  • The intercept handler already awaits loader promises before finishing the navigation; awaiting the chunk import in parallel with loaders in the same handler gives code splitting without a loading-spinner flash — this is the part React.lazy alone can't do.
  • Needs a decision for type inference in route()/routeState() overloads (module-with-default vs component).
  • SSR: lazy components would need to resolve before renderToString, or be skipped like loader routes are today.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions