router-core/code-splitting

Configure TanStack Router route code splitting with bundler plugins.

Updated Apr 2, 2026

Search Tags:#typescript #routing #vite #lazy-loading #code-splitting #tanstack-router

Ready to run

npx skills add https://github.com/abereghici/skills --skill router-core-code-splitting-abereghici

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: router-core/code-splitting
Source: https://github.com/abereghici/skills/tree/main/skills/tanstack-router/code-splitting
Command: npx skills add https://github.com/abereghici/skills --skill router-core-code-splitting-abereghici

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Router route code can grow large, and splitting it into critical and non-critical parts reduces initial bundle size and speeds startup.

Core Features & Use Cases

Automatic code splitting via bundler plugin with autoCodeSplitting enabled for route files.
Manual splitting with .lazy.tsx and createLazyFileRoute for precise per-route control.
Per-route overrides with codeSplitGroupings and global options like defaultBehavior and splitBehavior to tailor bundling strategy.
Guidance for virtual routes, getRouteApi usage in split files, and best practices to avoid exporting components for proper splitting.
Use cases include large route trees, data loaders, and UI components where reducing main bundle size matters.

Quick Start

Enable autoCodeSplitting in your bundler plugin and organize routes according to the code-splitting guidance to start splitting automatically.

Frequently Asked Questions about router-core/code-splitting

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I split TanStack Router routes to reduce my initial bundle size?▼

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.

What is the difference between automatic and manual code splitting in TanStack Router?▼

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.

How do I configure per-route code splitting groupings in TanStack Router?▼

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.

Does TanStack Router code splitting work with Vite and TypeScript?▼

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.

Where should I place loaders and components when splitting TanStack Router files?▼

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.

Why are my TanStack Router code split routes not working correctly?▼

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.