prefetch 不会加速当前页，仅在 window.onload 完成、主线程空闲、网络有余量时低优先级缓存资源；需静态写入、绝对/根相对路径、正确 as 值（如 script/style）才可能生效。
用 prefetch 加载后续资源，核心是“不抢带宽、不拖当前页、只在空闲时悄悄下载”。它不是让当前页面变快，而是让用户点进下一页时几乎秒开。
prefetch 的触发时机和加载逻辑
浏览器只在以下条件全部满足后才发起 prefetch 请求：
- window.onload 已完成，且主线程无长任务阻塞
- 网络连接空闲（没有高优先级请求，如图片、CSS、preload 资源）
- 用户未启用“节省流量”模式，且当前网络非 2G 等受限环境
这意味着：你在 HTML 里写了 <link rel="prefetch" href="/detail.js">，Network 面板里不会立刻出现请求——要等整个页面渲染完成、所有图片加载完、JS 执行稳了，它才开始动。Chrome 默认隐藏这类请求，需手动勾选 Network 面板左上角的 “prefetch” 过滤器，并查看 Priority 列是否为 Low。
必须写对的三个硬性要求
prefetch 不是写了就生效，三处写错等于白写：
-
路径必须是绝对路径或根相对路径：用
/js/detail.4f9c.js或https://cdn.example.com/detail.js，不能写./detail.js或//cdn.example.com/detail.js -
必须静态写入 HTML：用 JS 动态创建并插入
<link rel="prefetch">，浏览器在解析期已过，基本不识别 -
as 属性强烈建议指定：虽然可省略，但漏写 or 写错（比如
as="fetch"）会导致复用率暴跌或静默失败；常用值有as="script"、as="style"、as="document"（慎用，Safari 支持差）
怎么判断该 prefetc 哪些资源？
别猜，盯用户行为路径。只对跳转概率 >60% 的后续页面资源开启：
- 列表页中，用户 hover 商品卡片时，预取详情页的 JS 和 CSS chunk
- 登录页成功后，立即 prefetch 首页路由资源（/home.js）
- 导航栏「我的订单」「购物车」按钮旁，提前 prefetch 对应页面 bundle
构建工具能自动帮你做：Webpack 中用 import(/* webpackPrefetch: true */ '@/views/Order.vue')；Vite 中用 import('./Order.vue', { with: { prefetch: true } })（Vite 5+）。这些注释会在 HTML 中生成正确的 <link rel="prefetch"> 标签。
别踩的坑：和 preload 混用、跨域、默认全开
常见错误会直接抵消效果：
- 同一 URL 同时写了 preload 和 prefetch → 浏览器发两次请求，缓存不共享，纯浪费带宽
- 对跨域资源（如 CDN 上的 JS）用 prefetch → Firefox/Safari 基本无视，即使开了 CORS 也没用
- 依赖 Vue CLI 或 Vite 默认 prefetch 插件 → 它可能把几十个低频路由全 prefetch，反而拖慢首屏，应显式关闭再按需开启
真正有效的 prefetch，是少而准：一个页面最多 2~3 个，且都对应明确的用户下一步动作。
