アプリケーションの規模が大きくなってくると初期ロードの時間が長くなり、ユーザー体験を損ないます。

TanStack Routerではルートファイルを分割して初期ロードのファイルサイズを減らし、アプリケーション開始時間までの時間を短くすることができます。

.lazy.tsx ファイルを作ることで手動でコード分割の設定もできますが、自動コード分割機能を使うのが楽です。

自動コード分割は、ファイルベースルーティング＋対応のバンドラーの環境で使えます。

対応バンドラーは現在 Vite、Rspack/Rsbuild、webpack、esbuild の4つです

自動コード分割の有効化

1
import { defineConfig } from 'vite'
2
import viteReact from '@vitejs/plugin-react'
3
import { TanStackRouterVite } from '@tanstack/router-plugin/vite'
4

5
export default defineConfig({
6
  plugins: [
7
    TanStackRouterVite({
8
      // ...
9
      autoCodeSplitting: true,
10
    }),
11
    viteReact(), // Make sure to add this plugin after the TanStack Router Bundler plugin
12
  ],
13
})

これだけでコード分割が有効になって遅延ローディングされるようになります。

遅延ローディングの対象

コードスプリッティング（遅延読み込み）の対象になるのは

• Route Component
• Error Component
• Pending Component
• Not-found Component の4つのみです。

以下の要素は遅延読み込みの対象になりません。

• Path Parsing/Serialization
• Search Param Validation
• Loaders, Before Load
• Route Context
• Static Data
• Links
• Scripts
• Styles

手動でのコード分割

手動でコードスプリッティングをする方法にも触れておきます。

1. hoge.tsx hoge.lazy.tsx という2つのファイルを作る
2. hoge.lazy.tsx の方では createLazyFileRoute を作り、遅延読み込みの対象（コンポーネント）を書く。

まとめ

• 初期ロードのファイルサイズを減らしてアプリケーションの起動を速くするには、自動コード分割を使う