会，prefetch 会偷偷耗光用户流量：浏览器后台持续下载不中止，as="document"时连带加载js/css/图片，2g下几秒即耗1–2mb，且devtools无法监控。
prefetch 会偷偷耗光用户流量吗
会，而且很难察觉。浏览器一旦发起 prefetch 请求，就不会因为用户切页、关闭标签或刷新而中止——它会在后台持续下载完整资源，哪怕当前页面 DOM 已销毁。尤其当 as="document" 时，还会连带加载该 HTML 中引用的 JS/CSS/图片，实际消耗远超预期。
移动端在 2G 或慢网下，几秒内就可能被预取掉 1–2 MB 流量，而用户根本没点进去。更麻烦的是：Chrome/Safari 都不提供“已预取多少字节”的监控入口，DevTools Network 面板里也看不到缓存状态（它走 HTTP 缓存，不是内存缓存）。
- 用户开了“节省流量”模式（Chrome/Edge 默认跳过
prefetch） - 目标资源返回
Cache-Control: no-store或max-age=0，浏览器直接不发请求 - 页面很快跳转或关闭，浏览器主动取消请求，但部分已下载内容仍计入流量
静态写死 link prefetch 为什么等于埋雷
硬写 <link rel="prefetch" href="/detail.html" as="document"> 到 HTML 里，本质是让用户为一个“可能永远用不到的页面”悄悄付费。这不是优化，是默认开启的流量黑洞。
Safari 对 prefetch 的支持直到 iOS 16.4 才稳定，旧版 WebView 基本忽略；Firefox 默认关闭（network.prefetch-next=false）；即使 Chrome 发出了请求，也可能因路径错误、跨域、as 写错而静默失效——你既看不到报错，也看不到请求，还以为“生效了”。
-
href必须是绝对路径或根相对路径（如/assets/detail.abc.js），不能是./detail.js或//cdn.example.com/xxx.js - 跨域
prefetch在 Safari/Firefox 中基本被无视，即使服务端开了 CORS 也没用 - 动态插入的
link（如document.createElement('link')）99% 情况下被忽略——HTML 解析期已过，浏览器不认
怎么让 prefetch 只在用户真有意向时才触发
真正可控的做法是行为触发 + 动态注入 + 路径锁定。用户悬停卡片、滚动到某区域、鼠标停留超过 200ms，才去预取那个确定的 chunk 文件，而不是整页 HTML。
例如电商列表页，只对点击率 Top 3 的商品 ID，拼出构建后的真实 JS 路径（如 /assets/ProductDetailPage.xxxx.js），再调用 prefetchResource() 注入 link。这样既避开 as="document" 的风险，又避免 SSR 渲染时报错。
- 触发时机选
mouseenter或IntersectionObserver，延迟 200ms 防误触 -
as必须显式声明（如as="script"），漏写或写错（如as="fetch"）会导致静默降级 - React/Vue 中放在
useEffect或onMounted里执行，确保 DOM 存在且非服务端环境 - 别预取
/product/123这类路由地址——它可能返回带 nonce/token 的动态 HTML，缓存后渲染失败
比 prefetch 更省心的替代方案：直接 import()
如果你的“下一页”是代码分割后的模块（比如 React lazy + import('./About')），直接调用这个 import() 表达式就行。浏览器会自动预取对应 chunk，优先级略高于 rel="prefetch"，且天然兼容所有现代浏览器。
它不需要你知道构建后的真实文件名，Vite/Webpack 会自动 resolve；也不依赖 as、href、同源限制——只要模块能被正常 import，预取就成立。相比手动管理 link 标签，这是更简单、更可靠、更少出错的选择。
复杂点在于：它只适用于异步模块，不适用于纯 HTML 页面跳转；且需要确保构建工具正确生成 chunk 名称和 publicPath，否则 runtime resolve 失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
