TanStackRouter CodeSplitting

This codemod automates the process of splitting your TanStack Router route files into two separate files to enable code splitting. By utilizing this codemod, you can easily move non-critical route configuration, such as the component, into a separate .lazy.tsx file, which allows for better performance and reduced initial load time in your React application.

Before Code Splitting

In the original setup, all route configurations, including critical and non-critical parts, are contained within a single file.

// src/routes/posts.tsx
import { createFileRoute } from '@tanstack/react-router';
import { fetchPosts } from './api';

export const Route = createFileRoute('/posts')({
  loader: fetchPosts,
  component: Posts,
});

function Posts() {
  // ...
}

After Code Splitting

After running the codemod, the route configuration is split into two files:

Critical Route Configuration

The critical part of the route configuration remains in the original file:

// src/routes/posts.tsx

import { createFileRoute } from '@tanstack/react-router';
import { fetchPosts } from './api';

export const Route = createFileRoute('/posts')({
  loader: fetchPosts,
});

Non-Critical Route Configuration

The non-critical part, such as the component, is moved to a new .lazy.tsx file:

// src/routes/posts.lazy.tsx
import { createLazyFileRoute } from '@tanstack/react-router';

export const Route = createLazyFileRoute('/posts')({
  component: Posts,
});

function Posts() {
  // ...
}