动态路由应使用 rel="prefetch" 而非 rel="preload"，因 preload 会立即下载且不参与 import() 缓存，而 prefetch 在空闲时低优先级加载，需用绝对/根相对路径并确保同源，且仅在 中声明才有效。

动态路由脚本不能用 rel="preload"

直接在 <link rel="preload"> 里写懒加载路由的 JS 路径，浏览器会立刻下载它，但后续 import() 仍会重新发起请求——因为 preload 的缓存不参与动态 import 的 fetch 流程。更糟的是，Webpack/Vite 生成的 chunk 名带哈希，静态写死 href 会随构建失效，维护成本高。

关键路由该用 rel="prefetch"，不是 preload

rel="prefetch" 才是匹配“按钮点击后才跳转”这一场景的正确方案。它告诉浏览器：“这个资源用户**可能**在下一次导航中用到，请在当前页空闲时低优先级下载”，完全避开首屏带宽争抢。

• 必须写成绝对或根相对路径，例如 <link rel="prefetch" href="/assets/Settings.789xyz.js" as="script">
• 路径要和实际构建产物一致；推荐用 Webpack 的 webpackPrefetch: true 或 Vite 的 import.meta.webpackPrefetch 自动生成，避免手写
• 别加 crossorigin 或乱设 as="font"：prefetch 不触发 CORS 预检，字体 prefetch 易静默失败
• 确保同源，且声明在 中——动态插入的 <link> 基本无效

验证 prefetch 是否真正生效

别只看 HTML 有没有那行代码。打开 Chrome DevTools → Network 面板 → 勾选左上角 “prefetch” 过滤器：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• Initiator 列应显示为 prefetch，不是 parser 或 script
• Priority 列应为 Low；如果看到 Highest，说明你误用了 preload
• 跳转到目标路由后，对应 JS 应状态码为 200 (from memory cache) 或 304，而非重新下载

modulepreload 不适用于动态路由

rel="modulepreload" 只对静态 import 链有效，比如入口模块里 import { router } from './router.js' 这种可提前解析的依赖。而按钮触发的 import('./Settings.js') 是运行时决定的，浏览器无法在解析期预知路径，modulepreload 对它完全无效。

真正容易被忽略的是：prefetch 的请求时机由 window.onload 触发，如果按钮在 onload 前就被点了，那 prefetch 根本没机会发出——这时候得靠服务端渲染或更早的路由预判逻辑补位。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！