html怎么用modulepreload优化_HTML如何预加载ES模块资源-html教程-PHP中文网

modulepreload 是 html 中用于预加载 es 模块的资源提示机制，仅发起网络请求而不执行脚本；与 defer（控制执行时机）、async（异步下载并立即执行）不同，它纯属下载调度，不干涉执行逻辑。

html怎么用modulepreload优化_html如何预加载es模块资源

modulepreload 是什么，和 defer、async 有啥区别

modulepreload 是 HTML 中专门用于预加载 ES 模块（<script type="module"></script>）的资源提示机制。它不执行脚本，只提前发起网络请求，把模块及其依赖（比如被 import 的其他 .js 文件）拉到浏览器缓存里。

和 defer 不同：defer 控制执行时机（DOM 解析完再执行），但不保证提前下载；async 会异步下载并立即执行，破坏执行顺序；而 modulepreload 纯属“下载调度”，完全不干涉执行逻辑。

常见错误现象：写了 <link rel="modulepreload"> 却没生效，或者控制台报 Failed to load module script —— 很可能路径写错，或没配 crossorigin（尤其用 CDN 或跨域模块时）。

必须指定 href，且值要和后续 <script type="module" src="..."></script> 的 src 完全一致（包括查询参数）
如果模块服务启用了 CORS（比如静态资源放在 cdn.example.com），<link> 必须加 crossorigin 属性，否则预加载会被浏览器忽略
不能用 modulepreload 加载非模块脚本（比如 type="text/javascript"），会静默失败

怎么写一个有效的 modulepreload link 标签

最简可用写法就是一行 <link rel="modulepreload" href="/path/to/app.js">，但实际项目中得考虑路径、CORS、依赖链这些事。

使用场景：你有关键模块（比如路由入口 main.mjs）需要首屏就用，又不想等 <script></script> 解析到才开始下载。

路径必须是绝对路径或根相对路径（如 /assets/main.mjs），不能是相对路径（./main.mjs）—— 浏览器不支持
如果模块本身 import 了其他模块（比如 import { foo } from './utils.mjs'），modulepreload 不会自动递归预加载它们；得手动列出来，或用构建工具生成完整依赖列表
多个模块预加载，建议按执行依赖顺序排列 <link> 标签，虽然规范没强制，但部分浏览器会按顺序发起请求，利于 TCP 连接复用

示例：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

<link rel="modulepreload" href="/assets/vendor.mjs" crossorigin><link rel="modulepreload" href="/assets/main.mjs" crossorigin>

构建工具里怎么自动生成 modulepreload

手写 <link> 很容易漏、错、过期。真实项目基本靠构建工具注入，比如 Vite、Rollup、Webpack 插件。

性能影响：预加载太多非首屏模块，会挤占带宽，反而拖慢关键资源；但只预加载 1–3 个核心入口，通常能减少 100–300ms 的首屏 JS 加载延迟。

Vite 默认开启 build.rollupOptions.output.manualChunks 时，会自动生成 modulepreload 标签（在 index.html 中）
Rollup 用户可用 rollup-plugin-module-preload，注意它依赖 rollup-plugin-html 或类似插件把标签写入 HTML
Webpack 需配合 html-webpack-plugin + webpack-module-preload-plugin，配置稍重，且要注意 Webpack 5+ 的模块图解析是否包含动态 import()

容易踩的坑：开发环境热更新后，HTML 里的 modulepreload href 还是旧 hash，导致 404 —— 构建插件必须监听输出文件变更，并更新 HTML 中的链接。

modulepreload 和 HTTP/2 Push、preload 的关系

modulepreload 是客户端声明式预加载，不依赖服务器配置；而 HTTP/2 Server Push 已被主流浏览器弃用（Chrome 96+ 移除），别再折腾。

和通用的 <link rel="preload"> 比：后者可预加载任何资源（字体、图片、JSON），但对模块来说，preload 缺少模块语义 —— 浏览器不会解析它的 import 依赖，也不会等它完成再执行其他模块；modulepreload 则明确告诉浏览器“这是 ES 模块，请按模块图处理”。