路由懒加载核心是用动态import()替代静态引入，webpack和vite均原生支持但配置不同：需统一用函数式异步组件、命名chunk提升可读性与缓存、差异化配置分包策略，并结合预加载与大小监控优化性能。
路由懒加载的核心是用动态 import() 替代静态引入，让组件只在对应路由被访问时才加载。Webpack 和 Vite 都原生支持，但配置重点和优化方向略有不同。
路由配置写法：统一用函数式异步组件
无论 Webpack 还是 Vite，都应采用以下标准写法：
-
Vue Router：直接在
component字段返回一个import()函数，如component: () => import('@/views/User.vue') -
React Router：配合
React.lazy()+Suspense，如const User = React.lazy(() => import('@/pages/User')) - 避免使用已废弃的
require.ensure或System.import，Vite 完全不兼容
命名 Chunk：提升可读性与缓存控制
给动态导入添加注释，能合并相关模块、统一 chunk 名称，便于调试和长期缓存：
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
- Webpack 支持
/* webpackChunkName: "user" */，例如：component: () => import(/* webpackChunkName: "user" */ '@/views/UserProfile.vue') - Vite 原生不识别该注释，但可通过插件（如
vite-plugin-chunk-names）或 Rollup 的manualChunks实现类似效果 - 同一功能模块下的多个路由（如用户管理页）共用一个 chunk 名，可减少请求数量
构建工具差异化配置要点
Webpack 和 Vite 在分包逻辑、开发体验、产物结构上各有侧重：
-
Webpack：需关注
optimization.splitChunks配置，尤其是cacheGroups，可提取公共依赖（如 Vue、Axios）为独立 vendor chunk；启用chunks: 'async'确保只对异步模块生效 -
Vite：默认基于 Rollup，推荐在
vite.config.ts中配置build.rollupOptions.output.manualChunks，按库分类打包（如vendor: ['vue', 'pinia']），并设置entryFileNames控制输出路径 - Vite 开发时无打包过程，懒加载表现为真实 HTTP 请求，热更新更快；Webpack 在大型异步模块中可能出现 HMR 卡顿
预加载与性能增强策略
懒加载不是终点，还需主动干预关键路径：
- 对高频跳转路由（如登录后跳转首页），可在全局导航守卫中提前触发一次
import()，实现“软预加载” - Vite 构建后自动注入
<link rel="modulepreload">，无需手动处理；Webpack 需借助preload插件或自定义 HTML 模板 - 配合
build.chunkSizeWarningLimit（Vite）或performance.hints（Webpack）监控 chunk 大小，避免单个懒加载模块过大（建议单个不超过 200–300 KB）
