router-core/code-splitting

Reduce bundle size by enabling autoCodeSplitting in the TanStack Router Vite plugin to automatically separate critical and non-critical route code. Alternatively, create .lazy.tsx files to explicitly lazy load components and hooks.

AutoCodeSplitting is a Vite plugin feature that automatically splits route code into critical and non-critical chunks. By setting autoCodeSplitting to true, the bundler separates components and hooks without requiring manual file creation, optimizing web application load performance.

Create .lazy.tsx files for routes that need explicit lazy loading of components, error, pending, or not-found UI. This manual approach allows precise control over when non-critical route code is loaded, complementing or replacing the automatic Vite plugin configuration.

Use getRouteApi to safely access typed route hooks from split .lazy.tsx files. This allows you to use hooks without importing the main route definition file, keeping critical and non-critical code separated for better bundle size optimization.

Yes, define codeSplitGroupings or splitBehavior to customize how each route is chunked. These per-route overrides let you specify exactly how critical and non-critical code is grouped, providing granular control over bundle splitting.

No, you can omit empty critical files and let the router generate virtual routes automatically. This simplifies code splitting setup by removing the need for placeholder files when routes only contain non-critical, lazy-loaded code.