自动代码分割

当使用 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 就知道浏览器中需要哪些捆绑包，更重要的是，不需要哪些。

如果用户访问 "/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 仍会保留在捆绑包中，因此您可以在其他模块导出中使用仅限服务器的代码。