rel="prefetch"在spa中常不触发，因其需同时满足onload完成、网络/cpu空闲、用户未跳转三条件；而spa路由切换不触发onload，故后续跳转均无效。
SPA 路由切换时，rel="prefetch" 为什么经常不触发
它根本不是“一写就拉”，而是严格等待三个条件同时满足：页面 onload 完成、浏览器判定网络/CPU 空闲、用户还没跳走。单页应用里，路由切换通常靠 JS 拦截（比如 Vue Router 的 beforeEach 或 React Router 的 useNavigate），整个过程不触发页面卸载，onload 也只在首屏发生一次——后续所有路由跳转，prefetch 都不会重新评估或启动。
常见错误现象包括：Network 面板完全看不到请求、控制台无报错、资源路径确认无误但始终不下载。
- Chrome DevTools 默认过滤
prefetch请求，必须手动勾选 “prefetch” 类型或清空过滤器才能观察 - 资源若已被强缓存（如
Cache-Control: immutable），浏览器直接读磁盘，不发新请求 - 目标 URL 跨域（哪怕只是协议不同）时，浏览器静默忽略，连 DNS 查询都不会发起
- 动态插入的
<link rel="prefetch">（例如在router.afterEach里 append）基本无效，只认静态中初始存在的声明
rel="prefetch" 和 rel="preload" 在 SPA 中绝对不能混用
preload 是给当前页用的，prefetch 是为下一页投机准备的；两者缓存位置、优先级策略、触发时机完全不同。在 SPA 里把某个路由组件 JS 写成 preload，等于告诉浏览器：“这个脚本现在就要执行”，但它实际要等到路由进入、import() 调用才被需要——结果就是提前占带宽、拖慢首屏，且后续仍会重复请求一次。
正确做法是：只对明确属于“下一个用户极可能访问的页面”所依赖的资源用 prefetch，例如从首页跳详情页前，预取 /js/detail.chunk.js 和对应 CSS。
-
preload必须配as（如as="script"），漏写或写错（如as="fetch"）会导致降级为低优 fetch -
prefetch不强制要求as，但填错（如该填as="script"却写了as="document"）会导致缓存无法复用 - 不要给懒加载 chunk 写
preload——那是prefetch的职责；也不要给首屏主 bundle 写prefetch——它本该由preload或modulepreload承担
真正能响应路由切换的预加载，得靠 rel="modulepreload"
如果你的 SPA 入口是 type="module"，且路由组件通过静态 import 声明依赖（如 import Detail from './pages/Detail.js'），那么 modulepreload 才是唯一能递归预取整条依赖链的方案。它会在 HTML 解析阶段预解析 href 指向的模块，并自动发现并预取所有 import 语句中的子模块（如 core.js、router.js），避免多轮 RTT。
关键限制：不能加 as 属性（加了反而被忽略），href 必须和最终 import() 或 type="module" 中的路径完全一致（包括查询参数）。
-
modulepreload不支持crossorigin，跨域模块需确保服务端返回正确 CORS 头 - 它只处理静态
import，对import('./dynamic-' + name + '.js')这类动态表达式无效 - Webpack/Vite 构建后若生成带 hash 的文件名（如
detail.abc123.js），modulepreload的href必须同步更新，否则缓存失效
验证是否生效，别只盯 HTML 源码
最常被忽略的是：浏览器对 as 值和实际返回 MIME 类型不匹配时，既不报错也不警告，只是静默降级——请求头错、缓存分区错、优先级错，全靠你手动核对。
打开 Chrome DevTools → Network 面板 → 刷新页面 → 筛选目标资源名后，重点看三列：
-
Initiator应显示prefetch、preload或modulepreload，而非parser或script -
Priority对preload应为Highest或High；对prefetch应为Low；modulepreload无 Priority 显示，但应出现在 Initiator 列 -
Headers标签页里，检查Accept请求头是否匹配as（如as="script"应含application/javascript），再比对响应头Content-Type是否一致
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
