这是 TanStack Router 的代码分割(Code Splitting)指南,用于把路由代码拆成关键部分与非关键部分,减少主包体积、按需加载。
用途:关键代码(路径解析/序列化、validateSearch、loader、beforeLoad、路由上下文、静态数据、Links、scripts、styles)留在主包;非关键代码(component、errorComponent、pendingComponent、notFoundComponent)被拆分懒加载。loader 默认不拆分,因为它本身是异步的,再拆会增加“先取 chunk 再执行”的双重异步成本。
主要能力与用法:
- 自动拆分:在打包插件中设 autoCodeSplitting: true,插件须放在框架插件之前,路由文件会被自动转换,不需要 .lazy.tsx。
- 手动拆分:无法用自动拆分时,用 createLazyFileRoute 创建 .lazy.tsx,仅支持 component、errorComponent、pendingComponent、notFoundComponent;关键文件为空时可整体删除,routeTree.gen.ts 会生成虚拟路由。
- 基于代码的路由:用 createLazyRoute 配合 route.lazy(() => import(...))。
- 类型化钩子:在拆分文件里用 getRouteApi('/path'),提供 useLoaderData、useLoaderDeps、useMatch、useParams、useRouteContext、useSearch。
- 拆分控制:路由内 codeSplitGroupings 覆盖单路由;插件里 defaultBehavior 改默认分组,splitBehavior 做按路由编程逻辑。优先级为 codeSplitGroupings > splitBehavior > defaultBehavior。
常见错误:从路由文件导出组件函数会进入主包、破坏拆分;根路由 __root.tsx 不支持拆分;拆分 loader 会带来双异步;在拆分文件里 import { Route } 获取类型钩子会破坏拆分,应改用 getRouteApi。
限制:根路由始终渲染、不可拆分;loader 默认驻留主包;自动拆分依赖打包插件,CLI 场景需手动拆分。其余配置与依赖未提供。