router-core/code-splitting

TanStack Router route code-splitting separates critical and non-critical code to reduce initial bundle size. You can enable autoCodeSplitting via your Vite bundler plugin or manually split routes using .lazy.tsx files and createLazyFileRoute.

Automatic code splitting uses the bundler plugin's autoCodeSplitting feature to separate route files globally, while manual splitting uses .lazy.tsx files and createLazyFileRoute for precise per-route control over what gets split.

You can configure per-route code splitting groupings by using the codeSplitGroupings property for specific overrides, and set global options like defaultBehavior and splitBehavior to tailor your overall bundling strategy.

Yes, TanStack Router code splitting applies to React projects using bundler plugins like Vite and supports TypeScript. It handles route files, data loaders, and UI components to reduce main bundle size.

When splitting TanStack Router files, you should avoid exporting components to ensure proper splitting. The Skill provides specific guidance for loader versus component placement and getRouteApi usage within split files.

Code split routes may fail if you export components from split files, which prevents proper splitting. Following best practices for virtual routes, getRouteApi usage, and avoiding component exports resolves these issues.