自动代码分割

当使用 React Router 的框架功能时，您的应用程序会自动进行代码分割，以提高用户访问应用程序时的初始加载时间性能。

按路由进行代码分割

考虑以下简单的路由配置

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

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

模块（contact.tsx 和 about.tsx）不会全部打包到一个巨大的构建中，而是成为打包程序的入口点。

由于这些入口点与 URL 段相关联，React Router 只需根据 URL 就能知道浏览器需要哪些 bundle，更重要的是，哪些 bundle 不需要。

如果用户访问 "/about"，则会加载 about.tsx 的 bundle，但不会加载 contact.tsx。这确保了大大减少了初始页面加载的 JavaScript 代码量，并加快了应用程序速度。

移除服务器端代码

任何仅限服务器的路由模块 API 都将从 bundle 中移除。请考虑以下路由模块

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 仍然保留在 bundle 中，因此您可以在其他模块导出中使用仅限服务器的代码。