用途:@tanstack/router-plugin 是驱动 TanStack Router 文件式路由与自动代码分割的打包器插件,通过 unplugin 支持 Vite、Webpack、Rspack 和 esbuild。
主要能力:插件由最多三个子插件组成——路由生成器(始终启用,监听路由文件并生成 routeTree.gen.ts)、代码分割器(autoCodeSplitting 为 true 时启用,借助虚拟模块把路由文件拆成懒加载 chunk)、HMR(开发模式且未启用代码分割器时,热更新路由变更而无需整页刷新)。
使用方式:安装 npm install -D @tanstack/router-plugin。Vite 中从 @tanstack/router-plugin/vite 导入 tanstackRouter,Webpack 用 /webpack,Rspack 用 /rspack,esbuild 用 /esbuild。关键限制:在 Vite 配置中路由插件必须放在框架插件(React、Solid、Vue)之前,否则路由生成与代码分割会静默失败。非 React 框架必须显式设置 target('react' | 'solid' | 'vue',默认 'react')。
配置项:核心有 target、routesDirectory(默认 './src/routes')、generatedRouteTree(默认 './src/routeTree.gen.ts')、autoCodeSplitting、enableRouteGeneration;文件约定有 routeFilePrefix、routeFileIgnorePrefix(默认 '-')、routeFileIgnorePattern、indexToken、routeToken;代码分割可用 codeSplittingOptions 的 defaultBehavior 与 splitBehavior 按路由定制;输出有 quoteStyle、semicolons、disableTypes、disableLogging、addExtensions、enableRouteTreeFormatting;还支持 virtualRouteConfig 传入虚拟路由配置。
适用场景:使用 TanStack Router 做文件式路由的 React、Solid、Vue 项目,需要自动代码分割或路由热更新时。
限制与注意:启用 autoCodeSplitting 后无需手写 createLazyRoute 或 lazyRouteComponent,插件会在构建时转换路由文件;收费、价格、平台等信息暂未提供。