router-core/code-splitting

TanStack Router code splitting reduces initial bundle size by automatically lazy-loading non-critical UI files while ensuring critical route code loads upfront. You can enable autoCodeSplitting in your bundler configuration.

The .lazy.tsx file convention in TanStack Router is used to define lazy-loaded route components. It works with createLazyFileRoute and createLazyRoute to maintain typed hooks in split files for on-demand loading.

Yes, you can override automatic code splitting for specific routes using the per-route codeSplitGroupings option. This allows fine-grained, programmatic control over split behavior for individual route configurations.

To get typed route hooks in split code files, use getRouteApi alongside createLazyFileRoute or createLazyRoute. This ensures your .lazy.tsx files maintain full TypeScript type safety during code splitting.

Yes, autoCodeSplitting targets React apps using TanStack Router to automate route code splitting. It configures your bundler to split code automatically, minimizing initial bundle size while preserving fast on-demand loading.