自动代码分割

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