webpack 配合 typescript 实现路由懒加载，核心是启用 "module": "esnext" 使 import() 保留原样供 webpack 处理，配合 target ≥ es2015、lib 包含 es2015.promise 和 dom，并在路由中使用函数式 import()，webpack v5+ 默认支持动态分割，需搭配 suspense 或 loading 状态处理。
Webpack 配合 TypeScript 实现路由懒加载，核心是让 import() 语法被正确识别、保留并生成独立 chunk，同时确保类型系统不报错。配置本身不复杂，但几个关键点必须对齐，否则会打包失败或失去类型支持。
tsconfig.json 必须启用 esnext 模块
TypeScript 默认会把 import() 编译成 CommonJS 或 AMD 代码，这会导致 Webpack 无法识别动态导入语义，进而无法做代码分割。解决方法是显式指定模块系统：
-
"module": "esnext" —— 这是最关键一项，它让 TS 保留
import()原样输出，交由 Webpack 处理 - "target" 至少为 "es2015"（推荐 "es2020" 或更高），保证 Promise 和 async/await 支持
- "lib" 中包含 "es2015.promise" 和 "dom"，避免类型缺失报错
示例片段：
{
"compilerOptions": {
"module": "esnext",
"target": "es2020",
"lib": ["dom", "es2015.promise", "es2015.collection"],
"moduleResolution": "node"
}
}
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
路由定义中使用 import() 函数式写法
在 Vue Router 或 React Router 中，组件字段不能写静态 import，而要写返回 Promise 的函数。Webpack 会自动将该函数内路径转为独立 chunk：
- Vue Router（v4+）：
const Home = () => import('@/views/Home.vue') - React Router（v6.4+）：
const Home = React.lazy(() => import('./pages/Home')) - 可选添加 webpackChunkName 注释，便于调试和缓存控制：
() => import(/* webpackChunkName: "home" */ '@/views/Home.vue')
注意：不要在函数体内写条件逻辑或变量拼接路径（如 import(`./${name}.vue`)），除非你明确需要 import.meta.glob 或服务端路由场景，否则 Webpack 无法静态分析生成 chunk。
Webpack 需启用默认代码分割策略
现代 Webpack（v5+）已默认开启动态导入支持，无需额外插件。但建议确认以下基础配置生效：
- 确保没有禁用
optimization.splitChunks，默认配置已适配import()生成的异步 chunk - 若需自定义 chunk 名称或合并策略，可在
splitChunks.chunks中设为'all'，并设置cacheGroups分组规则 - 开发时可通过
webpack-bundle-analyzer插件验证 home、about 等 chunk 是否独立生成
配合 Suspense 或 loading 状态处理
动态导入返回 Promise，实际加载有延迟。框架层需提供 fallback 机制：
- React 中必须包裹
<suspense fallback="<Loading"></suspense>>，否则会抛出 promise rejection - Vue 中可利用
defineAsyncComponent或直接在组件内处理loading、error状态 - TypeScript 下，异步组件类型需显式标注，例如：
const Home = defineAsyncComponent(() => import('./Home.vue')) as AsyncComponent
