skills.rest
cill-i-am
cill-i-amCOMMUNITY
Explore all skills by this author →
𝕏@cillo_bGitHub

router-core/code-splitting

Configure automatic and manual code splitting for TanStack Router routes.

Updated Apr 1, 2026
Search Tags:#react#routing#lazy-loading#code-splitting#tanstack-router#bundler-config
One-click install
npx skills add https://github.com/cill-i-am/task-tracker --skill router-core-code-splitting-cill-i-am
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: router-core/code-splitting
Source: https://github.com/cill-i-am/task-tracker/tree/main/.agents/skills/tanstack-router-code-splitting
Command: npx skills add https://github.com/cill-i-am/task-tracker --skill router-core-code-splitting-cill-i-am

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Router route code-splitting can be complex to coordinate between critical and non-critical code, with multiple options (automatic vs manual, per-route groupings) and bundler configurations.

Core Features & Use Cases

  • Automatic code splitting via bundler plugin with autoCodeSplitting enabled.
  • Manual splitting using .lazy.tsx files and per-route grouping overrides.
  • Per-route codeSplitGroupings to fine-tune how chunks are created.
  • Global split configuration examples and best practices for performance.
  • Use cases include large apps with many routes seeking faster initial load times and improved perceived performance.

Quick Start

Enable automatic code splitting by turning on autoCodeSplitting in the bundler plugin and organize routes to leverage per-route groupings.

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 set up automatic code splitting in TanStack Router?▼

Manual code splitting uses .lazy.tsx files for route components, allowing you to group non-critical code into separate chunks and override automatic splitting behavior with per-route codeSplitGroupings configurations.

How does getRouteApi work with code-split route files?▼

The getRouteApi function provides typed hooks for use in split route files, allowing you to maintain type safety across separated code chunks while accessing route metadata and parameters in manually or automatically split configurations.

Can I override code splitting groupings for specific routes?▼

Code splitting is beneficial for large React apps with many routes seeking faster initial load times, as it separates critical and non-critical code to reduce the initial bundle size and improve perceived performance.

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

Automatic code splitting uses a bundler plugin to handle chunk creation globally, while manual splitting uses .lazy.tsx files for per-route control, allowing you to choose between convenience and granular grouping overrides.

Related Skills

Explore More Software Engineering Skills→
abereghiciabereghici

router-core/code-splitting

Configure TanStack Router route code splitting with bundler plugins.

Community
Advanced
sgcarstrendssgcarstrends
21

bundle-analysis

Analyze JavaScript bundle sizes and identify optimization opportunities for Next.js apps.

Official
Advanced
Dimon94Dimon94
111

frontend-dev-guidelines

Provide React/TypeScript frontend guidelines covering Suspense data fetching, lazy loading, MUI v7, and TanStack Router.

Community
Intermediate
1k-off1k-off
1

plugin-bundle-size

Reduce Grafana app plugin bundle size by lazy-loading module.js with React.lazy and Suspense.

Community
Advanced