rel="prefetch"才是动态路由脚本的正确预取方式，因其低优先级、空闲时下载且不挤占首屏资源；而rel="preload"会抢带宽、浪费请求并常被取消。
不能用 rel="preload" 预加载动态路由脚本——它会抢首屏带宽、浪费请求、还常被浏览器取消。
为什么 rel="preload" 对动态路由脚本完全不合适
浏览器把 rel="preload" 当作“当前页立刻要用”的强信号。而动态路由脚本（比如 /js/product-detail.js）只在用户点击后才执行，根本不在当前页渲染路径上。
- 首屏资源被挤占：JS 下载优先级拉到 Highest，拖慢
main.css、首屏图片甚至 HTML 解析 - 资源纯属闲置：用户没点进该路由，预加载的 JS 一丁点都没用上，缓存也随当前页销毁
- DevTools 显示
pending/canceled：尤其在 HTTP/2 推送开启时，重复请求被浏览器主动终止
rel="prefetch" 才是动态路由脚本的正确预取方式
rel="prefetch" 明确告诉浏览器：“这资源用户可能下一步用到，请等空闲时低优先级下载”。它天然适配 SPA 的懒加载逻辑。
- 必须用绝对或根相对路径：
/js/product-detail.js✅，./js/product-detail.js❌（子路径下解析易错） - 不要加
as="script"：prefetch 不校验类型，加了反而可能因 MIME 不匹配静默失败 - 配合
rel="preconnect"提前建连：若脚本在 CDN（如https://cdn.example.com），先声明<link rel="preconnect" href="https://cdn.example.com"> - 放在
底部或开头：既不阻塞首屏关键资源，又确保 DOM 加载前已声明
怎么验证 rel="prefetch" 真生效了
别只看 HTML 里有没有那行标签，得看浏览器实际行为：
- 打开 DevTools → Network 面板 → 切换到 “All” 或 “JS” 标签 → 找到目标脚本 → 查看
Initiator列是否为prefetch - 观察时间线：
prefetch请求通常出现在load事件之后，且Priority显示为Low - 手动清空缓存后刷新，再点进对应路由，确认脚本加载耗时明显下降（从网络请求变成缓存读取）
最容易被忽略的是路径一致性——prefetch 的 href 必须和路由组件中 import() 的字符串字面量完全一致（包括大小写、斜杠、查询参数），差一个字符就无法复用缓存。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
