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

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

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

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

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

modulepreload 如何支持高效依赖图加载

• 它把模块下载从“执行路径中阻塞式拉取”变成“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 连接，降低建立开销

不复杂但容易忽略