router-core/code-splitting

Code splitting in TanStack Router keeps initial bundles small by moving non-critical route code into lazy-loaded chunks. This reduces main bundle size and improves startup time by separating critical and non-critical properties across route files.

Automatic code splitting uses a bundler plugin to transform route files into split chunks automatically. You enable it via the bundler plugin configuration, which handles the splitting without requiring manual .lazy.tsx file creation.

Manual splitting with .lazy.tsx is ideal when you need fine-grained control over specific routes. You use createLazyFileRoute or createLazyRoute for manual chunk creation, while automatic splitting handles broad transformations without per-file modifications.

Yes, you can use per-route codeSplitGroupings overrides for fine-grained control. Global split behavior is managed through defaultBehavior and splitBehavior configurations, allowing you to define the overall code splitting strategy.

Yes, getRouteApi provides typed access within split files. You can use it alongside createLazyFileRoute and createLazyRoute in .lazy.tsx files to maintain type safety when accessing route properties in manually split chunks.

Code splitting requires distinguishing critical vs non-critical properties to avoid loading unnecessary code. Improper configuration of splitBehavior or grouping overrides may lead to suboptimal chunking, making per-route tuning essential for minimizing startup time.