利用modulepreload预加载关键JS模块优化HTML模块加载性能
modulepreload仅负责提前拉取网络资源，不解析执行。与defer控制执行时机、async破坏依赖顺序不同，它只早期发起fetch。常见失效原因包括路径不一致、缺少crossorigin、不支持相对路径、不递归加载子模块。正确使用需放入，用绝对路径，构建工具可自动处理。
在优化 JavaScript 模块加载性能时，modulepreload 是一个常被误解的工具。许多人误以为它能直接加速模块执行，实际上它的作用仅限于提前请求网络资源。然而，一旦路径填写错误、遗漏 crossorigin 属性，或者未列出所有依赖子模块，预加载操作便会完全失效。
modulepreload 与 defer/async 的根本区别在哪里
一个常见的问题是：添加了 modulepreload 之后，模块执行是否会更快？实际上，它完全不参与执行流程。浏览器仅执行 fetch 操作，不会解析、构建模块图或执行任何代码。核心差异如下：
defer：等待 DOM 解析完成后执行，但下载时机由解析器控制，可能延迟首屏渲染。async：下载完成后立即执行，但会打乱模块顺序，对于存在 import 依赖关系的模块链而言，这种执行方式不可接受。modulepreload：唯一任务是在 HTML 解析早期发起 fetch，将模块及其显式声明的依赖存入缓存，等到后续