modulepreload本质是模块图感知的预加载，会自动解析并预取整个静态import依赖链，而preload仅下载单个资源且无模块语义解析能力。
modulepreload 和普通 preload 有什么本质区别
link rel="modulepreload" 不是给浏览器“提前下载一个脚本”，而是告诉它：这个模块及其所有静态依赖（包括 import 链路上的子模块）都要尽早 fetch 并解析，但不执行。而 rel="preload" 只管下载，且浏览器不会按模块语义去解析它——比如你用 preload 加载一个 .js 文件，即使它含 export，浏览器也不会预解析其 import 语句，后续 import() 仍要重新发起请求、重复解析。
常见错误现象：
- 用了
rel="preload"加as="script"加 ES 模块路径，但控制台仍看到多次网络请求、首屏模块加载没变快 - 模块里 import 了
lodash-es，但只 preload 了主模块，子模块没被覆盖，实际没省下任何时间
关键点在于：modulepreload 是模块图感知的，必须和最终 import 的路径完全一致（含扩展名、查询参数），否则不命中缓存。
怎么写才真正生效：路径、类型、位置都不能错
link rel="modulepreload" 必须满足三个硬性条件才能被识别为有效预加载：
立即学习“前端免费学习笔记（深入）”；
-
href值必须是有效的模块 URL（支持相对路径、绝对路径，但不能是data:或blob:） - 不能带
as属性（加了反而被忽略；这是和preload最大不同） - 必须放在
内，且早于任何触发模块导入的脚本（比如<script type="module"></script>或动态import()调用）
典型正确写法：
<link rel="modulepreload" href="./main.mjs"> <link rel="modulepreload" href="./utils.mjs"> <link rel="modulepreload" href="<a href="https://www.php.cn/link/0ff0a4ce9abf031dc12194a19ced4ef1">https://cdn.example.com/lib.mjs?version=2.1"></a>;
容易踩的坑：
- 写成
<link rel="modulepreload" href="./main.js" as="script">→as会让浏览器降级为普通 preload，失去模块图解析能力 - 把
modulepreload放在里，或放在type="module"脚本之后 → 浏览器可能已开始解析/执行模块，预加载失效 - 路径大小写不一致（如预加载
./Header.js，但代码里import Header from './header.js'）→ 完全不匹配，白写
和 dynamic import() 配合时要注意什么
modulepreload 对 import() 动态导入同样有效，但前提是：预加载的路径与 import() 字符串字面量完全相同。浏览器不会做路径归一化或扩展名补全。
比如：
- 预加载了
./feature.mjs，但代码里写import('./feature')→ 不匹配（缺.mjs） - 预加载了
./mod.js，但模块内有export { foo } from './dep'→./dep不会被预加载，除非显式声明
实操建议：
- 如果用构建工具（如 Vite、Rollup），让它们自动生成
modulepreload标签（Vite 默认开启build.manifest+ HTML 插件可输出） - 手动维护时，优先预加载最顶层的异步入口（如路由组件），再根据构建产物分析其直接依赖，逐个补全
- 不要试图预加载 node_modules 下的深层路径（如
lodash-es/isArray.js），CDN 或打包后路径往往不同，极易失效
Chrome DevTools 里怎么确认它真起作用了
打开 DevTools → Network 面板，筛选 JS 类型，观察两个关键信号：
- 目标模块的请求 Method 显示为
(from cache)或(from disk cache)，且 Initiator 列显示为Other（不是某个 script 的 import） - 在 Timing 选项卡中，该请求的
Start Time明显早于页面中第一个type="module"脚本的执行时间
更可靠的验证方式是看 Performance 面板的 “Module Preload” 事件：
- 开启录制后，在 Timings 区域找
ModulePreload条目，它会列出所有被成功预加载的模块 URL - 如果某条目状态是
failed，Hover 查看提示，常见原因是 MIME 类型不对（服务端返回text/plain而非application/javascript）或 CORS 头缺失
注意：Safari 当前（v17+）对 modulepreload 支持有限，部分场景下会忽略；Firefox 支持良好。别只盯着 Chrome 看效果。
预加载本身不解决模块体积大或依赖过深的问题，它只是把网络和解析阶段“往前挪”。如果模块树太重，预加载反而会抢占关键资源带宽——得先确认你真需要它，而不是用错地方。
