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

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

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

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

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

自動コード分割の有効化

1
{
2
  // ...
3
  "autoCodeSplitting": true,
4
}

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

遅延ローディングの対象

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

• 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 を作り、遅延読み込みの対象（コンポーネント）を書く。

まとめ

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