如何通过 modulepreload 指令在浏览器空闲期异步解析复杂的依赖有向无环图（DAG）-js教程-PHP中文网

modulepreload仅预取模块资源，不解析依赖或执行js；它需显式声明所有依赖路径并匹配import字面量，配合动态导入与requestidlecallback才能实现空闲期调度。

如何通过 modulepreload 指令在浏览器空闲期异步解析复杂的依赖有向无环图（dag）

modulepreload 本身不解析依赖图，也不在空闲期执行任何异步解析——它只做一件事：在 HTML 解析阶段就发起网络请求，把指定模块文件下载进浏览器缓存，且完全不触发 JS 解析、求值或副作用。

所谓“在浏览器空闲期异步解析复杂的依赖 DAG”，是混淆了几个不同层级的机制：

modulepreload 属于资源预获取（fetch-only） 阶段；
依赖图的静态分析和拓扑排序发生在 ES 模块图构建（module graph construction） 阶段，由浏览器在遇到 <script type="module"></script> 或 import() 时同步触发；
真正的“空闲期调度”需靠 requestIdleCallback、setTimeout(fn, 0) 或构建时拆包 + 动态导入控制，modulepreload 不参与其中。

但你可以用 modulepreload 为后续的 DAG 解析铺路——提前把关键节点拉进缓存，让图构建阶段跳过网络等待，专注做解析与执行调度。以下是实际可行的配合方式：

它把模块下载从“执行路径中阻塞式拉取”变成“HTML 解析时并行预取”，避免瀑布链
例如：主入口 main.mjs → import router.mjs → import auth.mjs，若只 preload main.mjs，后两者仍要等 main.mjs 执行到 import 行才发起请求；必须显式写：
```
<link rel="modulepreload" href="/assets/main.mjs"><link rel="modulepreload" href="/assets/router.mjs"><link rel="modulepreload" href="/assets/auth.mjs">
```
路径必须与最终 import 调用字面量完全一致（含协议、域名、大小写、查询参数）
错误示例：
<link href="./router.mjs"> → 相对路径被忽略
<link href="/assets/router.mjs?v=1.2"> + import './router.mjs' → 参数不匹配，预加载失效
跨域模块（如 CDN）必须加 crossorigin 属性，否则请求静默丢弃

page-agent 浏览器控制（CDP）
使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载
```
<link rel="modulepreload" href="https://cdn.example.com/app.mjs" crossorigin>
```
推荐加上 as="script"，明确资源类型，提升加载优先级并正确应用 CORS 策略
```
<link rel="modulepreload" href="/assets/main.mjs" as="script">
```

对非首屏、低优先级模块，不用 modulepreload，改用动态导入 + requestIdleCallback 控制时机

if ('requestIdleCallback' in window) {
  requestIdleCallback(() => {
    import('./analytics.mjs').then(m => m.init());
  });
}

构建时生成完整依赖链，交由工具自动注入 modulepreload
Vite 默认启用 build.rollupOptions.output.manualChunks + 插件自动提取并预加载所有静态依赖；Webpack 可配 webpack-preload-plugin；Rollup 需搭配 rollup-plugin-module-preload
多个 modulepreload 标签按执行依赖顺序排列（vendor → utils → features → main），部分浏览器会复用 TCP 连接，降低建立开销

不复杂但容易忽略