路由预加载策略是基于用户行为预测等条件，有选择地提前下载路由组件代码块以缩短跳转等待时间；其中webpackPreload高优先级并行加载，适合核心页面，webpackPrefetch空闲时低优先级下载，适合次高频页。
路由预加载策略，是指在用户尚未导航到某一路由前，提前将对应组件代码块（chunk）下载到浏览器缓存中，从而缩短后续跳转时的等待时间。它不是盲目全量加载，而是基于用户行为预测、路径权重或空闲时机，有选择地触发异步 chunk 的预取（prefetch）或预加载（preload）。
预加载 vs 预取：关键区别要分清
两者都通过 import() 的魔法注释控制，但语义和浏览器处理方式不同：
-
/* webpackPreload: true */：告诉打包工具生成
<link rel="preload">标签，浏览器会在当前导航的关键路径中**高优先级并行加载**该 chunk。适合核心页面（如首页、登录后主屏），但需谨慎使用——加载过早或过多会挤占首屏资源带宽。 -
/* webpackPrefetch: true */：生成
<link rel="prefetch">标签，浏览器在**当前页面空闲时（如交互完成、CPU 空闲）低优先级下载**，不阻塞渲染。适合次高频页（如列表页点进去的详情页、用户大概率下一步访问的模块）。
用 webpackChunkName 命名 chunk，提升可维护性与调试效率
默认情况下，Webpack 为每个动态 import 生成数字命名的 chunk（如 123.js），难以定位和分析。添加 webpackChunkName 注释可自定义 chunk 名称，便于识别来源、设置缓存策略，也方便在性能监控中归因：
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
- 写法示例：
import(/* webpackChunkName: "user-profile" */ './UserProfile.vue')→ 输出 chunk 文件名为user-profile.[hash].js - 配合预加载更清晰：
import(/* webpackChunkName: "order-detail" */ /* webpackPrefetch: true */ './OrderDetail.vue') - 同名 chunk 会被 Webpack 自动合并，避免重复打包；不同路由若共用同一组件（如多个页面都用
ChartWidget.vue），统一命名还能复用已缓存资源。
加载顺序不是靠代码位置，而是靠策略组合
import() 语句的书写顺序本身不影响加载优先级。真正决定顺序的是你赋予它的加载意图：
- 对首屏强依赖的模块（如主表单、数据卡片），用 webpackPreload + 明确 webpackChunkName，确保与主应用并行拉取；
- 对用户路径中“下一步大概率触发”的模块（如商品列表页后的详情页、搜索结果页后的筛选面板），用 webpackPrefetch + 可读 chunk 名，让浏览器在后台悄悄准备；
- 对权限隔离或低频功能（如管理员导出报表、客服工单历史），不加任何预加载标记，保持纯粹懒加载，节省初始流量。
实际配置小提示
Vite 和 Webpack 都原生支持这些魔法注释，无需额外插件。但要注意：
- Vite 5+ 默认启用
webpackPreload行为，若发现首屏变慢，可检查是否误加了过多 preload； - prefetch 的效果依赖用户停留时长——如果用户秒开秒走，预取可能还没完成；
- 可在路由守卫（如
beforeEach）中结合用户角色、设备网络类型（navigator.connection.effectiveType）动态启用/禁用 prefetch，实现更精细的流量控制。
