router-core-code-splitting

Set autoCodeSplitting: true in the tanstackRouter Vite plugin options, placing the plugin before the React plugin. Route components are then split into separate chunks automatically while loaders stay in the main bundle.

Create a .lazy.tsx file alongside the route file and use createLazyFileRoute for the component. The main route file keeps only critical config like the loader, and the lazy file supports component, errorComponent, pendingComponent, and notFoundComponent.

The most common cause is exporting the component function from the route file, which forces it into the main bundle. Another cause is importing the Route object into lazy files instead of using getRouteApi for typed hooks.

No, the loader is not split by default because it is already async. Splitting it adds a double async cost: fetching the chunk first, then executing the loader, which delays data fetching.

No, __root.tsx does not support code splitting because it renders regardless of the current route. Do not create a __root.lazy.tsx file.

Add codeSplitGroupings directly in the route file, for example [['loader', 'component']] to bundle them together. Per-route groupings take precedence over splitBehavior functions and defaultBehavior options.