路由级按需打包要求每个路由对应独立代码块，访问时加载；react router v6 必须用 lazy + suspense，webpack 需手动设 chunk 名，ssr 场景需换 loadable-components 或 next.js/remix，bootstrap 等库应按需引入并分离 vendor chunk。

路由级按需打包的核心是：每个路由对应一个独立的代码块，用户访问时才加载，不访问就不下载。关键不在“能不能分”，而在于“分得准不准、加载稳不稳、构建可不可控”。

React Router v6 必须用 lazy + Suspense

React Router v6 不支持在 Route 的 element 属性里直接写异步组件或手写 import()。强行这么做会白屏或报错，因为 element 要求传入已解析的 React 元素，不是 Promise。

• 用 React.lazy 包裹动态导入，且函数体必须无参、只返回 import() Promise
• 用 Suspense 包裹整个 Routes，不能只包某几个 Route；fallback 是必设的 loading 状态
• 所有可能触发懒加载的路由都必须在同一个 Suspense 下，否则无法拦截加载过程

Webpack chunk 名称要手动控制

默认生成的 chunk 文件名像 src_pages_Home_js.abc123.js，既难读又不利于 CDN 缓存和性能分析。必须加 Webpack 特殊注释来命名：

Skill Weave Chains — 技能链路由引擎

开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。

下载

• 注释格式严格：/* webpackChunkName: "Home" */，引号不能省，不能有空格或斜杠
• 注释必须紧贴 import()，中间不能换行或插入其他语句
• 相同 chunk 名会被自动合并——适合把多个页面共用的布局或工具模块打到一起

SSR 场景下 lazy 失效，得换方案

React 18 的 Suspense 在服务端渲染中不支持组件懒加载，只支持数据请求（如 use + read）。如果项目需要 SSR：

• 换成 loadable-components，它提供服务端友好的懒加载 API
• 或使用 Next.js、Remix 这类框架，它们内置了服务端兼容的动态导入支持
• 自己用 require() 手动模拟（仅限 Node 环境，需配合构建配置判断环境）

Bootstrap 等大型库也要参与路由分割

像 Bootstrap 5.3 这类 UI 库，默认全量引入会拖慢首屏。可以结合其模块化结构做协同优化：

• JS 层：每个路由只 import 当前页面真正用到的组件，比如只引入 Modal 和 Alert
• CSS 层：用 Sass 按需导入变量、mixins 和具体组件样式，避免引入整个 bootstrap.scss
• 构建层：在 Webpack 或 Vite 配置中，把 bootstrap 单独划入 vendor chunk，避免重复打包