用途:TanStack Router 将路由代码分为关键部分(匹配与启动加载所必需)与非关键部分(可懒加载),以减小主包体积。
主要能力:可通过打包插件自动分割,也可用 .lazy.tsx 文件手动分割。保留在主包中的关键内容包括路径解析/序列化、validateSearch、loader、beforeLoad、路由上下文、静态数据、链接、脚本、样式;被分割的非关键内容包括 component、errorComponent、pendingComponent、notFoundComponent。loader 默认不被分割,因其本身异步,分割会带来先取 chunk 再执行的二次异步成本,仅在有特定理由时才分割。
使用方式:推荐开启自动分割,在打包插件(如 Vite)中设置 autoCodeSplitting: true,插件须位于框架插件之前,路由文件会被自动转换,无需 .lazy.tsx。无法自动分割时可手动:关键文件使用 createFileRoute,懒加载文件使用 createLazyFileRoute(仅支持 component、errorComponent、pendingComponent、notFoundComponent)。若关键文件为空可删除,生成虚拟路由。基于代码的路由可用 createLazyRoute 与 .lazy() 方法。在分割文件中用 getRouteApi('/path') 获取类型化 hooks,包括 useLoaderData、useLoaderDeps、useMatch、useParams、useRouteContext、useSearch。可用每路由的 codeSplitGroupings 或全局 defaultBehavior、splitBehavior 配置分组,优先级为每路由配置高于 splitBehavior 高于 defaultBehavior。
限制与常见错误:切勿从路由文件导出组件函数,否则组件会进入主包并绕过分割;分割文件中不要 import Route,应使用 getRouteApi;__root.tsx 不支持代码分割,不要创建 __root.lazy.tsx;避免分割 loader。
适用场景:React 应用中基于 TanStack Router 的按路由懒加载与包体积优化。未提供具体版本、收费或性能数字。