HTML中使用modulepreload预加载ES模块的方法

`modulepreload` 是 HTML 中一种精准预加载 ES 模块的机制，它仅提前获取模块及其完整依赖链并存入浏览器缓存，不解析、不执行、无副作用，从而有效打破“瀑布式加载”，显著提升动态导入或深层依赖的实际加载性能；但其生效高度依赖绝对路径一致性、`as="script"` 声明及服务端 CORS 配置，仅适用于路径明确、使用可预期的场景（如入口依赖的底层库、用户操作前预判加载的模块或多个入口共用的大型工具包），盲目滥用反而浪费带宽；实践中强烈建议借助构建工具（如 Vite 或 Rollup 插件）自动生成并注入 preload 标签，避免手工维护导致的路径脱节与静默失效。

什么是 modulepreload，它和 script type="module" 有什么区别？

modulepreload 是一个 标签的 rel 值，专门用于提前获取（fetch）但不执行 ES 模块及其依赖。它不触发模块解析、求值或副作用，只把脚本及其 import 链下载到浏览器缓存中。

关键区别在于：

• 会立即 fetch + parse + evaluate
• 只 fetch，等后续真正 import 时才解析执行

这能避免重复请求，也能让深层依赖提前进缓存，减少“瀑布式加载”。

怎么写有效的 modulepreload 标签？

必须满足三个条件，缺一不可：

• 使用 ，不能用