尧图网站建设 
TanStack Router 使用 Webpack 集成文件路由从零配置到自动代码分割【免费下载链接】router A client-first, server-capable, fully type-safe router and full-stack framework for the web (React and more).项目地址: https://gitcode.com/GitHub_Trending/ro/router本文是一份面向 Webpack 项目的 TanStack Router 集成实战指南。它围绕当前仓库中的官方安装文档 docs/router/installation/with-webpack.md 展开讲解如何在 React 与 Solid 项目中安装tanstack/router-plugin插件、在webpack.config中启用文件路由与自动代码分割、处理生成的routeTree.gen.ts路由树文件并结合 packages/router-plugin 源码与仓库内 Quickstart 示例深入解释插件的底层工作原理与全部可配置项。读完本文你将能够在一小时内把 TanStack Router 接入任意基于 Webpack 5 的前端项目并理解插件各参数对构建产物和开发体验的实际影响。为什么要为 Webpack 项目单独安装插件TanStack Router 的核心能力之一是文件路由File-based Routing开发者只需在src/routes目录中创建.tsx/.ts文件路由树、类型安全的路由路径以及Link跳转校验就会自动生成。而这一能力在 Webpack以及 Vite、Rspack、esbuild项目中依赖官方提供的Bundler 插件来驱动。与使用 Vite 的项目不同Webpack 项目需要显式安装tanstack/router-plugin这个包并将其注册到webpack.config的plugins数组中插件会在构建/开发期间完成以下工作扫描routesDirectory下的文件并生成类型完整、可被编辑器与编译器识别的路由树文件可选地执行自动代码分割auto code splitting把路由的component、loader、pendingComponent、errorComponent、notFoundComponent等非关键节点拆分为独立 chunk在 Webpack 的 HMR 语义下处理路由热更新。该插件在当前仓库中的实体位于 packages/router-plugin/src/webpack.ts它基于unplugin的createWebpackPlugin封装而成因此可以以几乎相同的 API 形态同时服务于 Vite、Rspack 等构建器。第一步安装 tanstack/router-plugin在你的 Webpack 项目根目录按所用的前端框架安装对应依赖React 项目安装tanstack/router-plugin另需tanstack/react-router作为运行时依赖Solid 项目安装tanstack/router-plugin另需tanstack/solid-router。以仓库中的 React Quickstart 示例 examples/react/quickstart-webpack-file-based/package.json 为参照其 devDependencies 中同时包含插件、Webpack 全家桶与 SWC 编译链{ devDependencies: { swc/core: ^1.15.33, tanstack/router-plugin: ^1.168.37, types/react: ^19.0.8, types/react-dom: ^19.0.3, html-webpack-plugin: ^5.6.3, swc-loader: ^0.2.6, webpack: ^5.97.1, webpack-cli: ^5.1.4, webpack-dev-server: ^5.2.4 } }版本以当前仓库实际使用的版本范围为准^1.x。如果你使用 pnpm workspace安装命令相应为pnpm add -D tanstack/router-plugin。第二步在 webpack.config 中注册插件React 项目在原文档给出的最简配置基础上直接在plugins数组中注册tanstackRouter并指定target: reactimport { tanstackRouter } from tanstack/router-plugin/webpack export default { plugins: [ tanstackRouter({ target: react, autoCodeSplitting: true, }), ], }target用于告知插件生成哪种框架的路由代码autoCodeSplitting: true会开启自动代码分割。完整可运行的配置可参考仓库示例 examples/react/quickstart-webpack-file-based/webpack.config.js该示例还展示了与HtmlWebpackPlugin、swc-loader以及webpack-dev-server含historyApiFallback与 HMR的组合写法import path from path import { fileURLToPath } from url import HtmlWebpackPlugin from html-webpack-plugin import { tanstackRouter } from tanstack/router-plugin/webpack const __dirname fileURLToPath(new URL(., import.meta.url)) /** type import(webpack).Configuration */ export default ({ WEBPACK_SERVE }) ({ target: web, mode: WEBPACK_SERVE ? development : production, entry: path.resolve(__dirname, ./src/index.tsx), output: { path: path.resolve(__dirname, ./dist), filename: [name].bundle.js, publicPath: /, }, resolve: { extensions: [.ts, .tsx, .js, .jsx], }, plugins: [ new HtmlWebpackPlugin({ template: path.resolve(__dirname, ./public/index.html), filename: index.html, }), tanstackRouter({ target: react, autoCodeSplitting: true, codeSplittingOptions: { addHmr: Boolean(WEBPACK_SERVE) }, }), ], module: { rules: [ { test: /\.tsx?$/, exclude: /(node_modules)/, use: { loader: swc-loader }, }, ], }, devServer: { open: true, hot: true, historyApiFallback: { rewrites: [{ from: /./, to: /index.html }], }, static: [public], }, })示例中的codeSplittingOptions: { addHmr: Boolean(WEBPACK_SERVE) }是一个值得借鉴的细节仅在开发服务器webpack serve模式下注入 HMR 相关代码生产构建则保持纯净。Solid 项目Solid 的插件配置几乎相同只需将target改为solidimport { tanstackRouter } from tanstack/router-plugin/webpack export default { plugins: [ tanstackRouter({ target: solid, autoCodeSplitting: true, }), ], }与 React 不同Solid 需要 Babel 层面的 Solid JSX 编译支持SWC 目前不提供solid-js预设。因此还需在项目根目录添加.babelrc声明 Solid 与 TypeScript 预设// .babelrc { presets: [babel-preset-solid, babel/preset-typescript] }仓库中的 Solid 示例 examples/solid/quickstart-webpack-file-based/webpack.config.js 即采用babel-loader来加载.tsx?文件并额外用style-loader/css-loader/postcss-loader处理样式module: { rules: [ { test: /\.tsx?$/, exclude: /(node_modules)/, use: { loader: babel-loader }, }, { test: /\.css$/, use: [style-loader, css-loader, postcss-loader], }, ], },完成以上两步后插件即接管了文件路由的生成与拆包你可以直接在src/routes下开始编写路由组件根路由示例见 examples/react/quickstart-webpack-file-based/src/routes/__root.tsx。处理生成的路由树文件 routeTree.gen.ts插件会把扫描到的路由树写入./src/routeTree.gen.ts默认路径。这是一个由工具自动生成、不应手改的文件因此在接入 lint/格式化工具Prettier、ESLint、Biome与编辑器时需要将其排除。从 linter / formatter 中忽略原文档给出了三类工具的官方忽略方式配置要点如下Prettier在.prettierignore中追加src/routeTree.gen.tsESLint在.eslintignore或新版 ESLint 的ignores配置段中忽略src/routeTree.gen.tsBiome在biome.json的files.ignore数组中加入src/routeTree.gen.ts。这些工具各自的具体配置语法以对应工具官方文档为准这里不再附外部链接。VSCode 设置防止重命名后误开报错文件原文档特别提醒了一个 VSCode 使用场景当你重命名某个路由文件后编辑器可能意外打开routeTree.gen.ts并显示一堆错误。可以通过将生成文件标记为只读并同时从搜索结果与文件监听中排除来规避{ files.readonlyInclude: { **/routeTree.gen.ts: true }, files.watcherExclude: { **/routeTree.gen.ts: true }, search.exclude: { **/routeTree.gen.ts: true } }这些设置既可配置在用户级别也可放在项目根目录的.vscode/settings.json中只作用于当前工作区。插件默认配置与完整参数说明原文档强调插件自带一组开箱即用的默认值绝大多数项目无需任何额外配置{ routesDirectory: ./src/routes, generatedRouteTree: ./src/routeTree.gen.ts, routeFileIgnorePrefix: -, quoteStyle: single }其完整参数定义见 docs/router/api/file-based-routing.md以下是核心选项的用途与默认值速查配置项默认值作用routesDirectory./src/routes路由文件所在目录相对 cwd必填项不可为空generatedRouteTree./src/routeTree.gen.ts生成的路由树文件保存路径disableTypes: true时扩展名变为.jsrouteFilePrefix空串只有以该前缀开头的文件才参与路由routeFileIgnorePrefix-忽略以该前缀开头或位于同名目录的文件便于与路由组件同目录存放非路由文件例如posts/-components/Post.tsxrouteFileIgnorePatternundefined用正则忽略文件/目录如.((css\|const).ts)\|test-pagerouteTokenroute标识布局路由文件支持正则模式如{ regex: [a-z]-layout, flags: i }indexTokenindex标识索引路由文件同样支持正则与[home-page]形式的转义quoteStylesingle生成文件的引号风格single/doublesemicolonsfalse生成文件是否带分号autoCodeSplittingfalse是否自动拆分路由的非关键节点需配合 Bundler 插件使用disableTypesfalse关闭路由树类型生成输出.js文件addExtensionsfalse控制生成 import 的扩展名false去掉扩展名、true保留原扩展名、传字符串如js则替换为指定扩展名ESM 项目可用它生成.js后缀导入disableLoggingfalse关闭路由生成过程的控制台输出routeTreeFileHeader[/* eslint-disable */, // ts-nocheck, // noinspection JSUnusedGlobalSymbols]向生成文件头部追加内容routeTreeFileFooter[]向生成文件尾部追加内容enableRouteTreeFormattingtrue是否对生成文件执行格式化大项目可关闭以提速tmpDirprocess.env.TSR_TMP_DIR或.tanstack/tmp原子写入时使用的临时目录注意不要把routeFilePrefix、routeFileIgnorePrefix、routeFileIgnorePattern设置为与文件命名约定中的任何 token 相同的值否则可能引发意外行为。routesDirectory与generatedRouteTree为必填项不能设置为空字符串或undefined。这些参数既可以直接传给tanstackRouter({...})也可以写在tsr.config.json中尤其当routeToken/indexToken需要正则对象时JSON 里用{ regex: ..., flags: ... }表示内联配置中则使用原生RegExp。在源码层面所有选项都会经过 packages/router-plugin/src/core/config.ts 中基于 zod 的configSchema校验非法值例如codeSplittingOptions的拆分分组出现重复会在构建期直接报错。从源码看 Webpack 插件的工作原理三个可单独使用的入口阅读 packages/router-plugin/src/webpack.ts 可以发现该模块实际上导出了四个入口其中tanstackRouter是组合形态tanstackRouter/TanStackRouterWebpack生成 代码分割的组合插件unpluginRouterComposedFactory日常使用这一即可TanStackRouterGeneratorWebpack仅做路由树生成createRouterGeneratorPluginTanStackRouterCodeSplitterWebpack仅做代码分割createRouterCodeSplitterPlugin。三个入口均通过createWebpackPlugin来自unplugin包装因此同一套插件逻辑可复用于 Vite、Rspack 等构建器只是构建器入口文件不同Vite 对应 packages/router-plugin/src/vite.tsRspack 对应 packages/router-plugin/src/rspack.ts。Webpack HMR 语义的强制注入源码中的withWebpackHmrStyle是一个值得关注的实现细节Webpack 使用module.hot/import.meta.webpackHot做 HMR因此该函数会无条件把plugin.hmr.style覆盖为webpack无论用户在配置里写了什么。相应的HmrOptions.style只接受两个取值见core/config.tsvite默认生成 ESMimport.meta.hot的 Vite accept 回调语义代码webpack生成import.meta.webpackHot的 webpack/Rspackmodule.hot重执行语义代码。HMR 的具体适配器逻辑位于 packages/router-plugin/src/core/hmr/webpack-adapter.ts路由文件变更时会触发handle-route-update流程重新生成路由树并完成热替换。自动代码分割的粒度控制autoCodeSplitting的背后是codeSplittingOptions它支持按路由精细化控制拆分行为defaultBehavior全局默认拆分分组默认值为[[component],[pendingComponent],[errorComponent],[notFoundComponent]]即每个非关键节点单独成 chunksplitBehavior一个接收{ routeId }的函数可针对特定路由返回自定义分组或覆盖默认行为deleteNodes从路由中删除指定的非关键节点addHmr是否注入 HMR 相关代码默认true。分组数组的合法性同样由configSchema在构建期校验元素必须来自loader、component、pendingComponent、errorComponent、notFoundComponent五者且不能重复出现非法分组会得到包含具体提示的校验错误。这意味着你可以为首屏关键路由保留完整节点而对低频路由做激进拆包实现颗粒度远高于全局开关的性能优化。快速上手克隆官方 Quickstart 示例如果希望跳过手动配置直接克隆本仓库中现成的 Quickstart 示例跑起来是最快的路径Reactexamples/react/quickstart-webpack-file-basedSWC 编译链npm run dev启动webpack servenpm run build执行构建与类型检查Solidexamples/solid/quickstart-webpack-file-basedBabel 编译链。两个示例均包含完整的webpack.config.js、src/routes路由目录、src/routeTree.gen.ts生成文件与package.json脚本可作为自己项目的最小基线在此基础上按上文表格调整插件参数即可。小结在 Webpack 项目中接入 TanStack Router 文件路由只需要三个动作安装tanstack/router-plugin、在webpack.config注册tanstackRouter({ target: react | solid, autoCodeSplitting: true })、把生成的routeTree.gen.ts从 linter/编辑器流程中排除。在此基础上autoCodeSplitting与codeSplittingOptions提供了从一键开启到按路由定制拆分分组的完整性能调优路径而插件基于 unplugin 的统一封装也让同一套配置逻辑在不同构建器之间保持了一致的行为与心智模型。【免费下载链接】router A client-first, server-capable, fully type-safe router and full-stack framework for the web (React and more).项目地址: https://gitcode.com/GitHub_Trending/ro/router创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 TanStack Router 使用 Webpack 集成文件路由：从零配置到自动代码分割
TanStack Router 使用 Webpack 集成文件路由从零配置到自动代码分割【免费下载链接】router A client-first, server-capable, fully type-safe router and full-stack framework for the web (React and more).项目地址: https://gitcode.com/GitHub_Trending/ro/router本文是一份面向 Webpack 项目的 TanStack Router 集成实战指南。它围绕当前仓库中的官方安装文档 docs/router/installation/with-webpack.md 展开讲解如何在 React 与 Solid 项目中安装tanstack/router-plugin插件、在webpack.config中启用文件路由与自动代码分割、处理生成的routeTree.gen.ts路由树文件并结合 packages/router-plugin 源码与仓库内 Quickstart 示例深入解释插件的底层工作原理与全部可配置项。读完本文你将能够在一小时内把 TanStack Router 接入任意基于 Webpack 5 的前端项目并理解插件各参数对构建产物和开发体验的实际影响。为什么要为 Webpack 项目单独安装插件TanStack Router 的核心能力之一是文件路由File-based Routing开发者只需在src/routes目录中创建.tsx/.ts文件路由树、类型安全的路由路径以及Link跳转校验就会自动生成。而这一能力在 Webpack以及 Vite、Rspack、esbuild项目中依赖官方提供的Bundler 插件来驱动。与使用 Vite 的项目不同Webpack 项目需要显式安装tanstack/router-plugin这个包并将其注册到webpack.config的plugins数组中插件会在构建/开发期间完成以下工作扫描routesDirectory下的文件并生成类型完整、可被编辑器与编译器识别的路由树文件可选地执行自动代码分割auto code splitting把路由的component、loader、pendingComponent、errorComponent、notFoundComponent等非关键节点拆分为独立 chunk在 Webpack 的 HMR 语义下处理路由热更新。该插件在当前仓库中的实体位于 packages/router-plugin/src/webpack.ts它基于unplugin的createWebpackPlugin封装而成因此可以以几乎相同的 API 形态同时服务于 Vite、Rspack 等构建器。第一步安装 tanstack/router-plugin在你的 Webpack 项目根目录按所用的前端框架安装对应依赖React 项目安装tanstack/router-plugin另需tanstack/react-router作为运行时依赖Solid 项目安装tanstack/router-plugin另需tanstack/solid-router。以仓库中的 React Quickstart 示例 examples/react/quickstart-webpack-file-based/package.json 为参照其 devDependencies 中同时包含插件、Webpack 全家桶与 SWC 编译链{ devDependencies: { swc/core: ^1.15.33, tanstack/router-plugin: ^1.168.37, types/react: ^19.0.8, types/react-dom: ^19.0.3, html-webpack-plugin: ^5.6.3, swc-loader: ^0.2.6, webpack: ^5.97.1, webpack-cli: ^5.1.4, webpack-dev-server: ^5.2.4 } }版本以当前仓库实际使用的版本范围为准^1.x。如果你使用 pnpm workspace安装命令相应为pnpm add -D tanstack/router-plugin。第二步在 webpack.config 中注册插件React 项目在原文档给出的最简配置基础上直接在plugins数组中注册tanstackRouter并指定target: reactimport { tanstackRouter } from tanstack/router-plugin/webpack export default { plugins: [ tanstackRouter({ target: react, autoCodeSplitting: true, }), ], }target用于告知插件生成哪种框架的路由代码autoCodeSplitting: true会开启自动代码分割。完整可运行的配置可参考仓库示例 examples/react/quickstart-webpack-file-based/webpack.config.js该示例还展示了与HtmlWebpackPlugin、swc-loader以及webpack-dev-server含historyApiFallback与 HMR的组合写法import path from path import { fileURLToPath } from url import HtmlWebpackPlugin from html-webpack-plugin import { tanstackRouter } from tanstack/router-plugin/webpack const __dirname fileURLToPath(new URL(., import.meta.url)) /** type import(webpack).Configuration */ export default ({ WEBPACK_SERVE }) ({ target: web, mode: WEBPACK_SERVE ? development : production, entry: path.resolve(__dirname, ./src/index.tsx), output: { path: path.resolve(__dirname, ./dist), filename: [name].bundle.js, publicPath: /, }, resolve: { extensions: [.ts, .tsx, .js, .jsx], }, plugins: [ new HtmlWebpackPlugin({ template: path.resolve(__dirname, ./public/index.html), filename: index.html, }), tanstackRouter({ target: react, autoCodeSplitting: true, codeSplittingOptions: { addHmr: Boolean(WEBPACK_SERVE) }, }), ], module: { rules: [ { test: /\.tsx?$/, exclude: /(node_modules)/, use: { loader: swc-loader }, }, ], }, devServer: { open: true, hot: true, historyApiFallback: { rewrites: [{ from: /./, to: /index.html }], }, static: [public], }, })示例中的codeSplittingOptions: { addHmr: Boolean(WEBPACK_SERVE) }是一个值得借鉴的细节仅在开发服务器webpack serve模式下注入 HMR 相关代码生产构建则保持纯净。Solid 项目Solid 的插件配置几乎相同只需将target改为solidimport { tanstackRouter } from tanstack/router-plugin/webpack export default { plugins: [ tanstackRouter({ target: solid, autoCodeSplitting: true, }), ], }与 React 不同Solid 需要 Babel 层面的 Solid JSX 编译支持SWC 目前不提供solid-js预设。因此还需在项目根目录添加.babelrc声明 Solid 与 TypeScript 预设// .babelrc { presets: [babel-preset-solid, babel/preset-typescript] }仓库中的 Solid 示例 examples/solid/quickstart-webpack-file-based/webpack.config.js 即采用babel-loader来加载.tsx?文件并额外用style-loader/css-loader/postcss-loader处理样式module: { rules: [ { test: /\.tsx?$/, exclude: /(node_modules)/, use: { loader: babel-loader }, }, { test: /\.css$/, use: [style-loader, css-loader, postcss-loader], }, ], },完成以上两步后插件即接管了文件路由的生成与拆包你可以直接在src/routes下开始编写路由组件根路由示例见 examples/react/quickstart-webpack-file-based/src/routes/__root.tsx。处理生成的路由树文件 routeTree.gen.ts插件会把扫描到的路由树写入./src/routeTree.gen.ts默认路径。这是一个由工具自动生成、不应手改的文件因此在接入 lint/格式化工具Prettier、ESLint、Biome与编辑器时需要将其排除。从 linter / formatter 中忽略原文档给出了三类工具的官方忽略方式配置要点如下Prettier在.prettierignore中追加src/routeTree.gen.tsESLint在.eslintignore或新版 ESLint 的ignores配置段中忽略src/routeTree.gen.tsBiome在biome.json的files.ignore数组中加入src/routeTree.gen.ts。这些工具各自的具体配置语法以对应工具官方文档为准这里不再附外部链接。VSCode 设置防止重命名后误开报错文件原文档特别提醒了一个 VSCode 使用场景当你重命名某个路由文件后编辑器可能意外打开routeTree.gen.ts并显示一堆错误。可以通过将生成文件标记为只读并同时从搜索结果与文件监听中排除来规避{ files.readonlyInclude: { **/routeTree.gen.ts: true }, files.watcherExclude: { **/routeTree.gen.ts: true }, search.exclude: { **/routeTree.gen.ts: true } }这些设置既可配置在用户级别也可放在项目根目录的.vscode/settings.json中只作用于当前工作区。插件默认配置与完整参数说明原文档强调插件自带一组开箱即用的默认值绝大多数项目无需任何额外配置{ routesDirectory: ./src/routes, generatedRouteTree: ./src/routeTree.gen.ts, routeFileIgnorePrefix: -, quoteStyle: single }其完整参数定义见 docs/router/api/file-based-routing.md以下是核心选项的用途与默认值速查配置项默认值作用routesDirectory./src/routes路由文件所在目录相对 cwd必填项不可为空generatedRouteTree./src/routeTree.gen.ts生成的路由树文件保存路径disableTypes: true时扩展名变为.jsrouteFilePrefix空串只有以该前缀开头的文件才参与路由routeFileIgnorePrefix-忽略以该前缀开头或位于同名目录的文件便于与路由组件同目录存放非路由文件例如posts/-components/Post.tsxrouteFileIgnorePatternundefined用正则忽略文件/目录如.((css\|const).ts)\|test-pagerouteTokenroute标识布局路由文件支持正则模式如{ regex: [a-z]-layout, flags: i }indexTokenindex标识索引路由文件同样支持正则与[home-page]形式的转义quoteStylesingle生成文件的引号风格single/doublesemicolonsfalse生成文件是否带分号autoCodeSplittingfalse是否自动拆分路由的非关键节点需配合 Bundler 插件使用disableTypesfalse关闭路由树类型生成输出.js文件addExtensionsfalse控制生成 import 的扩展名false去掉扩展名、true保留原扩展名、传字符串如js则替换为指定扩展名ESM 项目可用它生成.js后缀导入disableLoggingfalse关闭路由生成过程的控制台输出routeTreeFileHeader[/* eslint-disable */, // ts-nocheck, // noinspection JSUnusedGlobalSymbols]向生成文件头部追加内容routeTreeFileFooter[]向生成文件尾部追加内容enableRouteTreeFormattingtrue是否对生成文件执行格式化大项目可关闭以提速tmpDirprocess.env.TSR_TMP_DIR或.tanstack/tmp原子写入时使用的临时目录注意不要把routeFilePrefix、routeFileIgnorePrefix、routeFileIgnorePattern设置为与文件命名约定中的任何 token 相同的值否则可能引发意外行为。routesDirectory与generatedRouteTree为必填项不能设置为空字符串或undefined。这些参数既可以直接传给tanstackRouter({...})也可以写在tsr.config.json中尤其当routeToken/indexToken需要正则对象时JSON 里用{ regex: ..., flags: ... }表示内联配置中则使用原生RegExp。在源码层面所有选项都会经过 packages/router-plugin/src/core/config.ts 中基于 zod 的configSchema校验非法值例如codeSplittingOptions的拆分分组出现重复会在构建期直接报错。从源码看 Webpack 插件的工作原理三个可单独使用的入口阅读 packages/router-plugin/src/webpack.ts 可以发现该模块实际上导出了四个入口其中tanstackRouter是组合形态tanstackRouter/TanStackRouterWebpack生成 代码分割的组合插件unpluginRouterComposedFactory日常使用这一即可TanStackRouterGeneratorWebpack仅做路由树生成createRouterGeneratorPluginTanStackRouterCodeSplitterWebpack仅做代码分割createRouterCodeSplitterPlugin。三个入口均通过createWebpackPlugin来自unplugin包装因此同一套插件逻辑可复用于 Vite、Rspack 等构建器只是构建器入口文件不同Vite 对应 packages/router-plugin/src/vite.tsRspack 对应 packages/router-plugin/src/rspack.ts。Webpack HMR 语义的强制注入源码中的withWebpackHmrStyle是一个值得关注的实现细节Webpack 使用module.hot/import.meta.webpackHot做 HMR因此该函数会无条件把plugin.hmr.style覆盖为webpack无论用户在配置里写了什么。相应的HmrOptions.style只接受两个取值见core/config.tsvite默认生成 ESMimport.meta.hot的 Vite accept 回调语义代码webpack生成import.meta.webpackHot的 webpack/Rspackmodule.hot重执行语义代码。HMR 的具体适配器逻辑位于 packages/router-plugin/src/core/hmr/webpack-adapter.ts路由文件变更时会触发handle-route-update流程重新生成路由树并完成热替换。自动代码分割的粒度控制autoCodeSplitting的背后是codeSplittingOptions它支持按路由精细化控制拆分行为defaultBehavior全局默认拆分分组默认值为[[component],[pendingComponent],[errorComponent],[notFoundComponent]]即每个非关键节点单独成 chunksplitBehavior一个接收{ routeId }的函数可针对特定路由返回自定义分组或覆盖默认行为deleteNodes从路由中删除指定的非关键节点addHmr是否注入 HMR 相关代码默认true。分组数组的合法性同样由configSchema在构建期校验元素必须来自loader、component、pendingComponent、errorComponent、notFoundComponent五者且不能重复出现非法分组会得到包含具体提示的校验错误。这意味着你可以为首屏关键路由保留完整节点而对低频路由做激进拆包实现颗粒度远高于全局开关的性能优化。快速上手克隆官方 Quickstart 示例如果希望跳过手动配置直接克隆本仓库中现成的 Quickstart 示例跑起来是最快的路径Reactexamples/react/quickstart-webpack-file-basedSWC 编译链npm run dev启动webpack servenpm run build执行构建与类型检查Solidexamples/solid/quickstart-webpack-file-basedBabel 编译链。两个示例均包含完整的webpack.config.js、src/routes路由目录、src/routeTree.gen.ts生成文件与package.json脚本可作为自己项目的最小基线在此基础上按上文表格调整插件参数即可。小结在 Webpack 项目中接入 TanStack Router 文件路由只需要三个动作安装tanstack/router-plugin、在webpack.config注册tanstackRouter({ target: react | solid, autoCodeSplitting: true })、把生成的routeTree.gen.ts从 linter/编辑器流程中排除。在此基础上autoCodeSplitting与codeSplittingOptions提供了从一键开启到按路由定制拆分分组的完整性能调优路径而插件基于 unplugin 的统一封装也让同一套配置逻辑在不同构建器之间保持了一致的行为与心智模型。【免费下载链接】router A client-first, server-capable, fully type-safe router and full-stack framework for the web (React and more).项目地址: https://gitcode.com/GitHub_Trending/ro/router创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考