router-core/code-splitting

To implement code-splitting in TanStack Router, enable automatic code splitting with autoCodeSplitting: true or use manual .lazy.tsx files to control lazy loading. This partitions routes into critical and non-critical chunks, optimizing initial load performance.

Automatic code splitting uses autoCodeSplitting: true to automatically chunk route files, while manual splitting uses .lazy.tsx files for finer control. Both strategies support createFileRoute conventions and optimize route loading by separating critical components.

To access typed hooks in split route files, use getRouteApi with per-route codeSplitGroupings. This maintains type safety across lazy-loaded boundaries while allowing critical and non-critical chunks to load independently.

Yes, TanStack Router supports splitting route loaders separately from components. Using createFileRoute with loader and component properties, you can control which parts load lazily and which remain critical for initial rendering.

Yes, virtual routes are supported for code-based splitting strategies using createLazyRoute and createLazyFileRoute. These allow flexible lazy loading configurations alongside global bundler options and precedence rules.

Bundler configuration requires enabling autoCodeSplitting: true for automatic splitting or setting up manual .lazy.tsx conventions. Global configuration options and precedence rules tailor bundling behavior for critical vs non-critical chunk groupings.