modulepreload是专为es模块设计的预加载机制，仅下载并解析模块及其静态import依赖但不执行；而preload是通用预加载，不解析依赖、不校验cors/mime，需手动指定as属性。
modulepreload 是什么，和 preload 有什么区别
modulepreload 是 HTML 中 <link> 标签的一种 rel 值，专门用于提前加载 ES 模块（即带 type="module" 的脚本），且会触发模块解析、依赖图构建和预编译（如 V8 的预解析），而不仅仅是下载资源。
它和 preload 的关键差异在于语义和执行时机：preload 只保证资源被提前获取，但不会执行或解析；modulepreload 则明确告诉浏览器“这是一个模块，按模块逻辑加载”，后续 import 或 <script type="module"></script> 引用时可直接复用已解析的模块实例，避免重复解析和网络请求。
常见错误现象：用 rel="preload" as="script" 加载一个 .js 文件，但该文件是 ES 模块，结果浏览器仍会重新发起请求并重新解析——因为 preload 不建立模块绑定关系。
怎么写正确的 modulepreload link 标签
必须同时满足三个条件，缺一不可：
-
rel属性值为"modulepreload" -
href指向一个有效的 ES 模块 URL（通常以.js结尾，且服务端返回Content-Type: application/javascript） - 不能加
as属性（modulepreload隐含as="script"，加了反而报错或被忽略）
<link rel="modulepreload" href="/assets/main.js">
不推荐写法（会被忽略或降级）：
-
<link rel="modulepreload" href="/main.js" as="script">（as冲突） -
<link rel="modulepreload" href="/main.mjs">（虽合法，但部分旧版浏览器不识别.mjsMIME，建议统一用.js并配好服务器 MIME） -
<link rel="modulepreload" href="./utils.js">（相对路径在某些构建工具中可能解析失败，优先用根路径）
modulepreload 在哪些场景下真正有用
适用于存在明确、稳定、非动态导入的模块依赖链，比如：
- 应用入口模块（
main.js）依赖的公共工具模块（utils.js、api.js） - 多个页面共用的核心模块，且你能在 HTML 中静态声明（例如 CMS 输出的固定
<link>） - 首屏关键路径中需同步使用的模块，又不想阻塞渲染（相比
<script type="module"></script>直接内联或放在中）
不适用的场景：
- 动态
import()的模块（无法静态预判路径） - 通过构建工具自动拆包生成的 chunk（如 Webpack 的
import()产生的xxx.chunk.js），除非你手动提取并硬编码到 HTML - 模块路径带查询参数或哈希（如
/main.abc123.js），若哈希未固化，预加载链接就失效
性能影响很实际：实测 Chrome 中，对一个 50KB 的工具模块使用 modulepreload，可减少约 80–120ms 的模块初始化延迟（含解析 + 编译），尤其在低端设备上更明显。
容易被忽略的兼容性和调试问题
- Safari 直到 iOS 17.4 / macOS 14.4 才支持
modulepreload，更早版本会静默忽略，不报错也不加载。不要指望它在旧 Safari 中 fallback 到 preload。
- Chrome DevTools 的 Network 面板里，
modulepreload 请求显示为 script 类型，但 Initiator 显示为 link，不是 import 或 script —— 这是正常行为。
- 如果模块本身有顶层
await 或依赖尚未 modulepreload 的其他模块，预加载不会阻止运行时等待，只是省掉了网络和解析开销。
- 构建工具（如 Vite、Rollup）默认不自动注入
modulepreload，需插件（如 vite-plugin-preload）或手动维护，否则容易漏掉深层依赖。
modulepreload，更早版本会静默忽略，不报错也不加载。不要指望它在旧 Safari 中 fallback 到 preload。modulepreload 请求显示为 script 类型，但 Initiator 显示为 link，不是 import 或 script —— 这是正常行为。await 或依赖尚未 modulepreload 的其他模块，预加载不会阻止运行时等待，只是省掉了网络和解析开销。modulepreload，需插件（如 vite-plugin-preload）或手动维护，否则容易漏掉深层依赖。模块预加载不是“越多越好”——只预加载确定会在首屏用到、且体积适中的模块；加载太多反而挤占关键资源带宽，还可能因模块未被立即使用而被浏览器丢弃。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
