modulepreload 失效的常见原因包括：路径不一致（如查询参数差异）、跨域资源缺失 crossorigin 属性、使用相对路径、误加 as 属性；其与 preload 的本质区别在于 modulepreload 会解析静态 import 并递归预取依赖，而 preload 仅下载文件。
modulepreload 为什么写了没效果？常见静默失效原因
写了 <link rel="modulepreload"> 却没看到 Network 面板里提前发起请求，也不是浏览器 bug，而是它被浏览器直接忽略了——modulepreload 失效是静默的，控制台不报错、也不警告。
- 路径不一致：
href="/assets/main.mjs和后续<script type="module" src="/assets/main.mjs?v=1.2.3"></script>差一个查询参数，就视为两个资源，缓存不复用 - 跨域没加
crossorigin：CDN 上的模块（如https://cdn.example.com/app.mjs）必须带crossorigin属性，否则预加载被跳过 - 用了相对路径：
./main.mjs或../utils.mjs不被支持，必须是绝对路径或根相对路径（如/js/main.mjs） - 误加
as="script"：modulepreload明确禁止as属性，加了就失效（这是最常踩的坑）
modulepreload 和 preload 的本质区别在哪
别把 rel="preload" 和 rel="modulepreload" 当成同类操作——它们触发的浏览器行为完全不同。
-
rel="preload"是通用下载指令，只管拉文件，不解析 import、不校验 MIME、不处理 CORS 模块规则；即使你 preload 了main.mjs，它里面import './utils.mjs'还是要等解析完才发起第二次请求 -
rel="modulepreload"是模块图感知的：浏览器会真正解析main.mjs的静态 import 语句，并递归预取所有声明的依赖（前提是这些依赖路径也出现在其他modulepreload标签里） - 二者不能混用：对同一个模块既写
preload又写modulepreload，可能因as冲突或缓存 key 不一致导致重复请求
怎么写一组真正能跑通的 modulepreload 标签
手动写不是不行，但必须严格对齐执行链路。假设你的入口模块是 /assets/main.mjs，它静态 import 了 /assets/router.mjs 和 /assets/api.mjs：
- 所有
href必须和最终<script type="module" src="..."></script>中的src完全一致（协议、域名、路径、查询参数） - 按依赖顺序排列：先
router.mjs（基础库），再api.mjs（业务工具），最后main.mjs（入口），利于 TCP 复用 - 跨域必须同步加
crossorigin，且值要和对应<script></script>标签一致（anonymous/use-credentials/ 空字符串） - 示例有效写法：
<link rel="modulepreload" href="/assets/router.mjs" crossorigin><link rel="modulepreload" href="/assets/api.mjs" crossorigin><link rel="modulepreload" href="/assets/main.mjs" crossorigin>
构建工具里怎么避免手写出错
手写 modulepreload 很快就会失控——hash 变更、路径重构、新增依赖都会让预加载列表失效。真实项目中应交由构建工具生成。
- Vite：默认不开启，需配合
vite-plugin-module-preload或自定义插件，从入口 chunk 的依赖图中提取完整路径列表 - Webpack：用
webpack-preload-plugin，配置rel: 'modulepreload'并指定入口点 - Rollup：需
rollup-plugin-module-preload，注意它不会自动分析动态import()，只处理静态import链 - 关键提醒：构建产物若启用 integrity（如
integrity="sha384-..."），预加载标签也必须带相同integrity值，否则缓存无法复用
模块路径一旦带查询参数（比如 ?t=1718289720），每次构建都变，预加载就失去意义——建议用 content hash 替代时间戳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
