路由懒加载本身不支持预下载，但可通过webpackPrefetch（空闲时静默预加载）或webpackPreload（用户交互时高优先级预加载）实现按需预下载，结合行为预测与缓存策略提升体验。
路由懒加载本身不支持“预下载”，它只是延迟加载组件，等用户访问对应路由时才去加载。但你可以结合 webpack 的 prefetch 或 preload，在空闲时提前拉取非关键但高频的路由组件，实现“按需预下载”效果。核心逻辑不是让所有组件都提前加载，而是识别用户可能下一步访问的路径，在合适时机触发预加载。
用 webpackPrefetch 实现静默预加载
在定义动态导入时添加 /* webpackPrefetch: true */ 注释，Webpack 会在主包加载完成、浏览器空闲时自动发起请求，把组件代码下载并缓存到 HTTP 缓存或 Service Worker 中（如果配置了）。
- 适合：用户大概率会访问的二级页面（如“我的订单”、“设置页”），但当前首屏不需要
- 写法示例：
<router-link to="/order">查看订单</router-link>
const Order = () => import(/* webpackPrefetch: true */ '@/views/Order.vue') - 注意：prefetch 是低优先级，不影响首屏资源；不会立即执行，只在 idle 状态下触发
用 webpackPreload 做关键路径预加载
对用户即将进入的下一个页面（比如从列表页点击进入详情页），可在用户 hover 或 focus 到链接时主动触发 preload，比 prefetch 更及时、更高优先级。
在SEO发布前，从路由清单生成XML网站地图和robots.txt
下载
当代理已经知道网站路由或内容URL，并且在启动前需要有效的sitemap XML、sitemap索引或robots.txt引用时，请使用sitemap。这是一个发布构件技能，而不是爬虫或SEO平台。
- 适合：明确的用户动线，例如商品列表 → 商品详情、文章列表 → 文章页
- 可配合
@vueuse/core的onClickPreact或自定义指令监听 hover/focus 事件 - 写法示例：
const loadDetail = () => import(/* webpackPreload: true */ '@/views/Detail.vue')
然后在onMouseEnter中调用loadDetail()（实际是触发 import，但因有 preload 提示，Webpack 会提前 fetch）
基于用户行为预测做智能预加载
不依赖固定规则，而是收集轻量行为信号（如鼠标移动方向、停留时长、滚动位置），判断用户意图后动态预加载。
- 例如：用户在商品卡片区域停留超 1.5s，且鼠标向右偏移，大概率要点右侧卡片 → 预加载其详情组件
- 可用 IntersectionObserver 监听可视区域变化，对即将进入视口的路由组件触发 prefetch
- 避免过度预加载：加限制（如最多同时预加载 2 个 chunk）、设超时（3s 内无后续动作则取消）
配合缓存策略提升复用率
预加载只有配合合理缓存才能真正减少重复请求。
- 确保构建产物的 JS 文件名含 contenthash，CDN 或浏览器能长期缓存
- 服务端返回
Cache-Control: public, max-age=31536000（一年） - 如有 Service Worker，可在 install 阶段把预加载的 chunk 加入 cache storage，离线也可用
