modulepreload是专用于预加载ES模块及其静态import依赖链的HTML资源提示机制，不执行脚本；而preload是通用预加载，不解析模块依赖，需指定as属性，且无法自动获取import的子模块。
modulepreload 是什么，和 preload 有什么区别
modulepreload 是 HTML link 标签的一种 rel 值，专用于提前获取（fetch）ES 模块脚本及其依赖链，但不执行。它和 preload 的关键差异在于语义与行为：
-
preload是通用资源预加载，浏览器不会做模块解析，也不会处理import依赖； -
modulepreload会让浏览器按模块规范解析入口文件，提前获取其静态import的所有依赖（递归），并存入模块图（module map），后续import()或<script type="module"></script>可直接复用，跳过重复 fetch。
常见错误现象：写了 <link rel="preload" href="a.js" as="script">，但 a.js 里 import './b.js' 依然触发二次网络请求——这就是没用对 modulepreload。
怎么写一个有效的 modulepreload link
必须同时满足三个条件，缺一不可：
-
rel值为"modulepreload" -
href指向一个合法的 ES 模块（即服务端返回Content-Type: text/javascript或application/javascript，且浏览器能识别为模块） -
不能加
as="script"（这是最常踩的坑！modulepreload不允许as属性，加了会被忽略）
正确写法示例：
立即学习“前端免费学习笔记（深入）”；
<link rel="modulepreload" href="/js/main.mjs"> <link rel="modulepreload" href="/js/utils.mjs">
注意路径必须可访问，且服务器要支持 CORS（如果跨域）。若用 .js 后缀，确保响应头有 type="module" 或通过 type 属性声明，否则浏览器可能不按模块解析。
modulepreload 要不要写在 里？顺序有影响吗
要，而且越早越好——理想位置是 开头、其他脚本之前。原因很实际：
- 浏览器解析 HTML 是流式的，
modulepreload链接越早出现，fetch 就越早发起 - 如果写在某个
<script type="module"></script>之后，该模块执行时可能已开始解析依赖，此时 preload 已错过最佳时机 - 多个
modulepreload之间无执行顺序要求，但建议按主模块 → 公共依赖 → 工具模块的逻辑排列，便于维护
容易被忽略的一点：如果模块有动态 import()，modulepreload 对它们无效——它只处理静态 import 语句。动态导入仍需靠运行时触发，或配合 import(...).then 手动预热。
和 HTTP/2 Server Push 或 import() prefetch 相比，modulepreload 优势在哪
HTTP/2 Push 已被主流浏览器弃用（Chrome 96+ 完全移除），不可靠且难调试；而 import() prefetch 需 JS 运行后才触发，存在延迟。modulepreload 是唯一能在 HTML 解析阶段就启动模块依赖树预获取的原生机制，且：
- 不依赖 JS 执行环境
- 支持跨域（只要 CORS 允许）
- 可被浏览器智能去重（同一 URL 多次
modulepreload只 fetch 一次） - 和构建工具（如 Vite、Webpack）的模块图输出天然契合，适合自动化注入
不过要注意：Safari 15.4+ 才完整支持，旧版 Safari 会忽略该标签，不报错也不生效——如果需兼容，得搭配 fallback 方案（比如首屏模块仍用常规 script type="module"）。
