Auto-Split Route Components using TSR Vite Plugin

[tannerlinsley]

The Challenge

Currently, code-splitting in TSR is conceptually simple. You can either:

• Do it manually with component: lazyRouteComponent(() => import('...'))
• Use file-based based route generation and the .lazy.tsx suffix, which generates the above for you in the routeTree.gen.ts generated file.

While not bad, these options get a bit more tedious when working with larger sites or even migrations. Dissecting every single route file you have into 2 simple to get a better bundle size is annoying and feels like low-hanging fruit for a compiler.

The Solution

The general idea is to use the Vite plugin to automatically split routes into separate chunks during the bundling process.

A typical route might look like this (but may also be implemented with a simple createRoute):

// src/pages/About.tsx
import { createFileRoute, Link } from '@tanstack/react-router'
import { ErrorComponent, LoadingComponent } from './components'

export const Route = createFileRoute('/about')({
  loader: () => import('./About'),
  staleTime: 1000 * 60 * 60 * 24,
  errorComponent: ErrorComponent,
  pendingComponent: LoadingComponent,
  component: About,
})

function About () {
  return <div>
    <h1>About</h1>
    <Link to="/">Home</Link> 
  </div>
}

The main goal of the plugin would be to:

• Extract out the component property from the createFileRoute function into a new chunk
• Replacing the original component property with a call to lazyRouteComponent and a dynamic import.
• Tree-shake both the new chunk and the modified existing file.

// src/pages/About.tsx
import { createFileRoute } from '@tanstack/react-router'
import { ErrorComponent, LoadingComponent } from './components'

export const Route = createFileRoute('/about')({
  loader: () => import('./About'),
  staleTime: 1000 * 60 * 60 * 24,
  errorComponent: ErrorComponent,
  pendingComponent: LoadingComponent,
  component: lazyRouteComponent(
    () => import('virtual:split-component?id=/about'),
    'component',
  ),
})

// src/pages/About.chunk.tsx
import { Link } from '@tanstack/react-router'

function About () {
  return <div>
    <h1>About</h1>
    <Link to="/">Home</Link> 
  </div>
}

Future Goals

• An option (defaults to false) to also split the loader function into a separate chunk.
• An option (defaults to false) to also split the errorComponent and pendingComponent properties into separate chunks.

[tannerlinsley]

To be clear, I need help to accomplish this. So anyone who is well-versed enough in Vite to accomplish this task is invited to take this on! The first person I have reached out to personally about this is @nksaraf. We'll see what he says!)

[JessicaSachs]

@tannerlinsley and I talked a bit - gonna pick this up using Bling's impl as inspo. @nksaraf I went through Vinxi as well. Ping me on Discord if you want to discuss realtime - you've done this stuff more than I have 😄.

[tannerlinsley]

@JessicaSachs noun (jés) - Friggin' awesome developer and friend.