自動コード分割

React Routerのフレームワーク機能を使用すると、アプリケーションが自動的にコード分割され、ユーザーがアプリケーションにアクセスしたときの初期読み込み時間が改善されます。

ルートごとのコード分割

このシンプルなルート設定を考えてみましょう。

import {
  type RouteConfig,
  route,
} from "@react-router/dev/routes";

export default [
  route("/contact", "./contact.tsx"),
  route("/about", "./about.tsx"),
] satisfies RouteConfig;

すべてのルートを1つの巨大なビルドにバンドルする代わりに、参照されているモジュール (contact.tsx と about.tsx) がバンドラーのエントリポイントになります。

これらのエントリポイントはURLセグメントに結合されているため、React RouterはURLからどのバンドルがブラウザで必要か、そしてさらに重要なこととして、どのバンドルが不要かを認識できます。

ユーザーが"/about"にアクセスした場合、about.tsxのバンドルはロードされますが、contact.tsxはロードされません。これにより、初期ページロードのJavaScriptフットプリントが大幅に削減され、アプリケーションの速度が向上します。

サーバーコードの削除

サーバー専用のルートモジュールAPIはすべてバンドルから削除されます。このルートモジュールを考えてみましょう。

export async function loader() {
  return { message: "hello" };
}

export async function action() {
  console.log(Date.now());
  return { ok: true };
}

export async function headers() {
  return { "Cache-Control": "max-age=300" };
}

export default function Component({ loaderData }) {
  return <div>{loaderData.message}</div>;
}

ブラウザ用にビルドした後、Componentのみがバンドルに残るため、他のモジュールエクスポートでサーバー専用のコードを使用できます。