rel="prefetch"在DevTools中不可见是正常设计，因它仅在onload后空闲时低优先级加载，常见原因包括未触发onload、用户跳失、Firefox默认禁用、Safari支持差、路径错误或404/CORS失败。
rel="prefetch" 只在当前页 onload 后、浏览器空闲时才发起请求，它不解决首屏慢，也不保证执行——写对了不一定看到请求，写错了大概率白忙活。
为什么写了 rel="prefetch" 却在 DevTools 里找不到请求
这不是 bug，是 prefetch 的设计逻辑决定的：它根本不会抢带宽，也不会打断主线程。常见真实原因包括：
- 页面还没触发
onload（比如有长任务阻塞、图片未加载完、JS 执行卡顿），prefetch 就不会启动 - 用户快速切走或刷新页面，浏览器主动取消请求（即使已开始下载）
- Firefox 默认关闭 prefetch（
network.prefetch-next为 false）；Safari/iOS WebView 在 iOS 16.4 之前基本忽略as="document" - href 是协议相对路径（如
//cdn.example.com/next.js），被当成非法协议直接跳过 - 目标资源返回 404 或 CORS 失败，Network 面板里能看到请求但状态是
net::ERR_FAILED或 404
验证是否生效：打开 Chrome DevTools → Network → Filter 输入 prefetch → 勾选 “All”（不是仅 XHR）→ 刷新页面观察是否有 low-priority 请求出现。
怎么写才能让 rel="prefetch" 真正起作用
静态写死在 HTML 中风险高，尤其对移动端和 Safari 用户。真正可控的做法是动态注入 + 明确意图 + 路径精准：
立即学习“前端免费学习笔记（深入）”；
- 必须用绝对路径或根相对路径（如
/assets/DetailPage.abcd123.js），避免./next.html在嵌套路由下解析错 - 显式声明
as属性：as="script"比as="document"更安全；后者会连带拉取 HTML 内所有子资源，且易受服务端动态 nonce/token 影响 - 只 prefetch 当前构建产物中确定存在的 chunk 文件，别写
/detail这种路由地址——它可能返回 HTML，但实际需要的是 JS/CSS 分离后的文件 - 记得同时 prefetch 对应的 CSS（如果分离）和关键字体（不过字体更推荐
preload） - 服务端响应头必须含
Cache-Control: public, max-age=31536000，否则下次跳转时缓存失效，prefetch 白做
示例（动态注入）：
const prefetchResource = (url) => {
const link = document.createElement('link');
link.rel = 'prefetch';
link.as = 'script';
link.href = url;
document.head.appendChild(link);
};
card.addEventListener('mouseenter', () => {
setTimeout(() => prefetchResource('/assets/DetailPage.abcd123.js'), 200);
});
什么时候该用 import() 替代 rel="prefetch"
如果你的“下一页”是代码分割模块（比如 React lazy 或 Vue defineAsyncComponent），直接调用 import('./DetailPage') 就够了——它本质是 runtime prefetch，优先级略高于 rel="prefetch"，且天然兼容所有现代浏览器，无需手动管理 link 标签生命周期。
- 不用操心
as、crossorigin、路径拼接等细节 - 浏览器自动识别模块依赖并 prefetch 对应 chunk 和 CSS
- SSR 场景下更安全：不会在服务端渲染时意外触发请求
- 可配合条件判断，比如只在 hover 后 200ms 内调用，避免误触
对比下来，rel="prefetch" 最适合 SSR 渲染时已知的、确定性高的后续页面资源（如首页预取用户中心 JS）；而运行时行为驱动的场景，import() 更简单可靠。
最容易被忽略的坑：跨域与缓存策略
prefetch 对跨域极其敏感。即使服务端开了 CORS，多数浏览器仍会静默忽略跨域 prefetch 请求——除非你显式加 crossorigin 属性，且资源返回头包含 Access-Control-Allow-Origin。但更现实的做法是：只 prefetch 同源资源。
另一个隐形陷阱是缓存版本错乱。比如你预取了 /js/profile-page.js，但上线后这个 URL 指向新版本，而旧版本仍在用户本地 HTTP 缓存中。结果用户跳转后加载的是旧 JS，导致白屏或报错。解决方案只有两个：用 contenthash 命名文件（如 profile-page.a1b2c3.js），或确保每次发布都更新 Cache-Control 的 max-age 值并清 CDN 缓存。
