What problem does it solve? Route components in TanStack Router apps ship in the main bundle by default, inflating initial load time. This Skill guides correct code splitting of route components so only critical code loads upfront while non-critical UI loads lazily. ## Core Features & Use Cases - Automatic Code Splitting: Enable autoCodeSplitting in the bundler plugin so route components are split into separate chunks without manual file restructuring. - Manual Splitting: Use .lazy.tsx files with createLazyFileRoute or createLazyRoute when the bundler plugin is unavailable, including virtual routes. - Typed Hooks in Split Files: Use getRouteApi to access useLoaderData, useSearch, and useParams without importing the Route object and defeating the split. - Use Case: A dashboard app with heavy chart components on /reports splits that route's component into a lazy chunk, keeping the initial bundle small while the loader stays in the main bundle. ## Quick Start Enable automatic code splitting in my TanStack Router Vite config and refactor my routes so components are split correctly.
