会，modulepreload会自动解析并预取静态import依赖链，但仅限字面量路径的顶层import语句，不处理动态import或路径含变量的场景。
modulepreload 会自动解析并预取静态 import 依赖链吗
会，但仅限于静态可分析的 import 语句，且必须在预加载阶段已知完整路径。浏览器拿到 <link rel="modulepreload" href="/main.mjs"> 后，会立即 fetch 并解析 main.mjs，然后递归扫描其顶层 import 声明（如 import { foo } from './utils.mjs'、import 'lib/chart.mjs'），对每个合法模块 URL 发起并行请求——前提是这些路径是字面量字符串，不包含变量或模板拼接。
常见错误现象：
- 写了
import('./chunk-' + id + '.mjs')—— 这是动态 import，modulepreload完全无法识别，不会触发任何子模块预取 -
href指向的模块返回 404 或 MIME 类型不是application/javascript—— 解析中断，依赖链停止展开，后续import仍会发起新请求 - 子模块路径是相对路径（如
./utils.mjs），但<link>标签不在根路径下，且未配base标签 —— 浏览器按当前文档 URL 解析相对路径，可能 404
为什么写了 modulepreload 却没复用模块图，Network 里还是两次请求
最常见原因是 crossorigin 不一致或缺失。模块脚本和预加载标签的 CORS 策略必须完全相同：如果 <script type="module" src="/a.mjs" crossorigin="anonymous"></script>，那么预加载也必须写成 <link rel="modulepreload" href="/a.mjs" crossorigin="anonymous">。漏掉、写成 crossorigin=""、或值为 use-credentials 而实际脚本没配，都会导致浏览器把它们视为两个不同资源，各自独立 fetch。
其他关键匹配项：
-
href和真实src的完整字符串必须一致，包括查询参数（/a.mjs?v=1≠/a.mjs?v=2） - 协议、域名、端口需完全相同；跨域时服务端必须返回允许的
Access-Control-Allow-Origin - 不能对内联模块（
<script type="module">...</script>）使用modulepreload，它只支持外部模块
modulepreload 能否配合构建工具自动生成完整依赖列表
可以，但需要构建工具显式输出所有静态可达模块。Vite 默认在 manifest.json 或 SSR 构建产物中提供模块图；Webpack 5+ 开启 experiments.outputModule: true 并配合插件（如 webpack-module-preload-plugin）也能生成。手动硬编码所有 <link rel="modulepreload"> 很容易漏掉深层依赖，尤其当入口模块通过多层 export * from 暴露符号时。
实操建议：
- 优先让构建工具扫描
type="module"入口，提取import和export关系，生成<link>标签序列 - 多个
modulepreload标签按执行顺序排列（如runtime.mjs→vendor.mjs→main.mjs），有助于 TCP 连接复用 - 避免预加载非首屏模块（如后台管理页的
admin.mjs），它们会抢占带宽，且模块图缓存可能被回收
modulepreload 和 preload/as="script" 混用会怎样
会冲突，且大概率导致重复下载。例如同时写：
<link rel="modulepreload" href="/app.mjs"><link rel="preload" href="/app.mjs" as="script">
浏览器会分别处理：前者按模块语义解析依赖、校验 MIME/CORS、存入模块图；后者仅下载文件、不解析 import、不校验模块规则。即使路径相同，这两个请求的缓存键不同（因 rel 和语义不同），无法复用。
更危险的是加了 as="script" 到 modulepreload：
<link rel="modulepreload" href="/app.mjs" as="script">
这个 as 属性会被浏览器直接忽略，但开发者可能误以为它生效了，从而放松对 crossorigin 或路径一致性的检查——结果就是预加载静默失败，毫无收益。
真正该做的只有两件事：用 modulepreload 覆盖所有首屏 ESM 入口及其静态依赖；用 preload as="font" 或 as="style" 处理非模块类关键资源。两者职责分明，不该交叠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
