SuperAPI AI 工具集

router-core/code-splitting

前端与建站

查看项目

更新于 10-16 10:22

技能介绍

该技能介绍 TanStack Router 的代码分割机制:将路由代码分为关键部分(匹配路由与开始加载所需)和非关键部分(可懒加载)。关键部分包括路径解析、validateSearch、loader、beforeLoad、路由上下文与静态数据;可分割的是 component、errorComponent、pendingComponent、notFoundComponent。默认不分割 loader,因为它本身异步,分割会带来两次异步成本。

主要用法:推荐在打包插件中开启 autoCodeSplitting: true,路由文件会自动转换,组件分到独立 chunk,loader 留在主包。若无法使用自动分割,可手动拆成 .tsx 关键配置与 .lazy.tsx 非关键文件,使用 createLazyFileRoute;基于代码的路由则用 createLazyRoute 与 .lazy() 方法。分割文件里用 getRouteApi('/path') 获取类型安全的 hooks(useLoaderData、useSearch、useParams、useRouteContext 等),不要导入 Route 对象,否则会破坏分割。

配置方面,可用每路由 codeSplitGroupings 覆盖分组,或用全局 defaultBehavior 与 splitBehavior 函数,优先级为:每路由 codeSplitGroupings > splitBehavior > defaultBehavior。

常见限制:不要导出组件函数,否则会被打进主包;__root.tsx 不支持代码分割,不要创建 __root.lazy.tsx;分割 loader 会产生双重网络瀑布,非必要不分割。若关键路由文件为空,可直接删除并使用虚拟路由。