modulepreload是html中专用于预加载es模块的link rel值，会触发下载、解析、依赖图构建；而preload仅下载资源，不解析模块依赖，也不校验cors/mime。
modulepreload 是什么，和 preload 有什么区别
modulepreload 是 HTML <link> 的一个 rel 值，专门用于提前加载 ES 模块（即带 type="module" 的脚本），且会触发模块解析、依赖图构建和顶层 await 执行（如果有的话）。它和 preload 不同：preload 只是下载资源，不执行；而 modulepreload 下载后还会做模块解析——这意味着它能真正“预热”模块系统，避免后续 import() 或 <script type="module"></script> 启动时的重复解析开销。
关键点：它只对 ES 模块有效，不能用于 script、css、图片等其他资源；也不能用在非模块脚本上（比如 type="text/javascript"）。
怎么写正确的 modulepreload link 标签
必须同时满足三个条件，缺一不可：
-
rel必须为"modulepreload" -
href必须指向一个有效的 ES 模块文件（通常以.js结尾，且服务器返回Content-Type: application/javascript） - 不能加
as属性（as="script"是错的；modulepreload隐含了as="script"且不允许覆盖）
正确示例：
<link rel="modulepreload" href="/src/main.js">
错误写法（常见坑）：
-
<link rel="modulepreload" href="/app.js" as="script">→ 浏览器会忽略该标签 -
<link rel="modulepreload" href="/utils.css">→ CSS 不是模块，无效，且可能触发警告 -
<link rel="modulepreload" href="/legacy.js">→ 如果该文件不是合法 ES 模块（比如用了var+require），加载时会在控制台报Uncaught SyntaxError: Cannot use import statement outside a module
modulepreload 和动态 import() 的配合逻辑
modulepreload 不会自动执行模块，也不会改变模块的执行时机——它只是把模块及其所有静态依赖（通过 import 声明的）提前拉取并解析好。后续调用 import('/src/feature.js') 时，如果该模块已被 modulepreload 覆盖，就会直接从已解析的模块图中返回 Promise，几乎零延迟。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
但要注意依赖链必须完整：如果你 preload 了 A.js，而 A.js 里 import './B.js'，那么 B.js 也会被递归 preload；但如果你只 preload B.js，而 A.js 动态 import 它，那没问题；可如果 A.js 还 import 了未 preload 的 C.js，那第一次 import 仍要网络加载 C.js。
建议做法：
- 用构建工具（如 Vite、Rollup）生成依赖图，提取出关键路径上的入口模块做 preload
- 避免 preload 过深或过多——每个
modulepreload都会占用主线程解析资源，太多反而拖慢首屏 - 不要 preload 会被 tree-shaking 掉的模块（比如只在某个条件分支里 import 的）
兼容性和调试要点
目前仅 Chromium 内核（Chrome ≥ 61、Edge ≥ 79、Opera ≥ 48）和 Safari ≥ 16.4 支持 modulepreload；Firefox 完全不支持（截至 2024 年中），会静默忽略该标签。所以不能把它当作功能必需项，只能作为性能优化层。
验证是否生效：
- 打开 DevTools → Network 面板，筛选
Initiator列，找HTMLParser触发的 JS 请求，且状态码为200（不是from memory cache） - 在 Console 中执行
performance.getEntriesByType('resource').filter(e => e.name.includes('main.js'))，看transferSize是否非零，且duration极小 - 若看到
Failed to load module script错误，大概率是href路径 404，或响应头缺少Content-Type: application/javascript
容易被忽略的是：服务端必须正确设置 MIME 类型。Nginx 默认对 .js 返回 application/javascript，但某些静态托管（如 GitHub Pages、Vercel serverless function）可能返回 text/plain，这会导致 modulepreload 失败且无明显提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
