动态导入import()是路由级代码拆分最直接方式；React Router中用lazy+Suspense，Vue Router v4直接配置import()函数，需注意路径静态性、避免嵌套未命名chunk，并通过构建产物和Network验证拆分效果。
使用 import() 动态导入是实现路由级别代码拆分最直接、标准的方式。它让每个路由对应的组件（及依赖）只在访问该路由时才加载，显著减少首屏体积。
在 React Router 中配合 lazy + Suspense 使用
React 官方推荐结合 React.lazy 和 Suspense 实现按需加载路由组件：
- 用
React.lazy(() => import('./About'))包裹动态导入，返回一个可渲染的懒加载组件 - 将
<Suspense fallback=<Loading />>放在路由出口外层（如<Router>内），统一处理加载状态 - 确保被懒加载的模块默认导出一个 React 组件（即
export default About）
Vue Router 中直接使用 import() 配置路由
Vue Router v4（Composition API）原生支持函数式组件加载：
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
- 在路由配置中，把
component设为返回 Promise 的函数：component: () => import('./views/Home.vue') - Webpack/Vite 会自动为此生成独立 chunk，文件名含哈希（如
2.d9f3a.js） - 可搭配
defineAsyncComponent做更精细控制（如错误重试、加载占位符）
避免常见陷阱
动态导入虽简单，但几个细节容易影响拆分效果：
- 不要在条件语句或循环中写
import()—— Webpack 需要静态可分析的路径，否则可能打包进主包 - 路径必须是字符串字面量或模板字符串中的静态部分（如
import(`./pages/${page}.vue`)不被支持） - 若组件内部又
import()子模块，它们会形成嵌套 chunk，需用webpackChunkName注释命名，方便调试：import(/* webpackChunkName: "chart" */ './Chart')
验证是否生效
部署前可通过构建产物确认拆分结果：
- 运行
npm run build后查看dist/js/目录，应存在多个小体积的xxx.xxxxxx.js文件 - 打开浏览器开发者工具 → Network 标签 → 切换路由，观察是否只加载对应 chunk（Status 200，Size 明显小于 main.js）
- 使用
source-map-explorer分析各 chunk 内容，确认无意外引入
