preload不能用于动态路由脚本预取，因其只识别静态声明资源且需html早期解析；应改用prefetch配合preconnect，并按用户行为触发。
preload 不能直接用于动态路由脚本的预取
rel="preload" 对动态生成的路由脚本（比如 import('./pages/product.js') 拆分出的 chunk）不起作用——它只认静态声明的资源，且必须在 HTML 解析早期就存在。浏览器不会解析 JS 里的动态 import 路径，更不会据此触发 preload。
常见错误现象：在 里硬写 <link rel="preload" href="product.js" as="script">，但实际打包后路径是 product.abc123.js，或该文件根本没被当前页用到，导致资源被下载却永不执行，还挤占首屏带宽。
- 动态路由脚本路径由构建工具（如 Webpack/Vite）运行时生成，不可预测，无法提前写死到 HTML 中
- 即使路径能猜对，
as="script"预加载后也不会自动执行，仍需靠import()触发，而 preload 缓存仅在后续同路径<script src></script>或import()时复用 - 若脚本含副作用或依赖模块顺序，提前 preload 可能引发执行时机错乱（比如依赖未初始化的全局状态）
用 prefetch 替代 preload 处理动态路由脚本
真正适合动态路由预取的是 rel="prefetch"，它专为“用户可能跳转的下一页”设计，优先级低、空闲时下载、不抢首屏资源。
使用场景：用户停留在首页，鼠标悬停在“商品列表”链接上，或完成某个表单后大概率会进入详情页——这时才是 prefetch 的合理时机。
- 路径必须是绝对或根相对（如
/js/product.abc123.js），不能是相对路径（如./product.js），否则在子页面下解析失败 - 不要写
as="script"—— prefetch 不校验as，写了也无效；但也不建议省略，因为某些旧版 Safari 会忽略无as的 prefetch 声明 - 避免在首屏 HTML 中批量声明所有路由的 prefetch，应按用户行为触发（如
onMouseEnter或IntersectionObserver监听导航区域） - Vite 用户可配合
import.meta.webpackHot?.status() === 'idle'判断空闲再触发 prefetch，Webpack 用户可用__webpack_require__.e的 Promise 回调时机
prefetch + preconnect 才是真实有效的组合
如果动态路由脚本托管在 CDN 或独立域名（如 https://cdn.example.com/js/product.js），光 prefetch 不够——DNS、TCP、TLS 握手耗时可能抵消预取收益。
必须搭配 rel="preconnect" 提前建连，否则 prefetch 请求仍要等连接建立，延迟不降反增。
-
<link rel="preconnect" href="https://cdn.example.com">应放在 prefetch 之前，且只对第三方域名有效（同域 preconnect 无意义） - preconnect 不带路径，只到域名层级；多个子域名需分别声明（
https://static.example.com和https://cdn.example.com是两个连接） - Chrome DevTools Network 面板中，prefetch 请求的
Initiator字段应显示为prefetch，且时间线里 DNS/TCP/TLS 阶段应已提前完成 - 注意：preconnect 有连接数限制（通常 6 个），别为不常用的域名滥用
验证是否真生效，而不是只看代码写了没
写了 <link rel="prefetch"> 不代表浏览器真下了——尤其在移动网络、低内存设备或隐私模式下，prefetch 可能被完全跳过。
最可靠验证方式是打开 Chrome DevTools → Network 面板 → 过滤 prefetch，观察请求是否发出、是否成功、是否被缓存复用。
- 关键看
Size列：如果是from disk cache或from memory cache，说明复用成功；如果是200，说明重新下载了 - 注意
Priority列：prefetch 应为Low，若显示High，说明被误写成 preload 或其他高优资源干扰了调度 - 移动端 Safari 对 prefetch 支持较弱，iOS 16+ 才稳定支持；Android Chrome 从 73+ 开始支持，但默认开启需用户启用 “预加载网页” 设置
- 别依赖
window.performance.getEntriesByName()查 prefetch 记录——它不记录 prefetch，只记录实际发起的 fetch/Navigation 请求
动态路由预取真正的复杂点不在怎么写标签，而在判断“什么时候该预取”和“预取之后怎么确保它被真正用上”。用户行为信号稀疏、网络状况多变、构建产物路径不固定，这些才是落地时最常卡住的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
