在 HTML 中使用 <link/> 预加载动态 Javascript `import(modules)`？答案

【问题标题】：Preload dynamic Javascript `import(modules)` with `<link/>` in HTML?在 HTML 中使用 <link/> 预加载动态 Javascript `import(modules)`？
【发布时间】：2020-07-02 19:57:45
【问题描述】：

<link rel="preload"></link> HTML 功能可用于在文档加载时获取脚本和静态数据，但它似乎根本没有为 Javascript 模块提供任何规定。

developer.mozilla.org

Google 宣传了最近的 <link rel="modulepreload"></link> 功能可以解决这个问题，同时他们还明确解释了为什么 rel="preload" 不适用于模块：

developers.google.com

目前尚不清楚 Firefox 是否支持此功能，但它显然是 WHATWG HTML 标准的一部分：

caniuse.com github.com

developer.mozilla.org html.spec.whatwg.org

<link rel="modulepreload></link> 可以用于通过调用import(modulepath) 动态导入的模块吗？ 这种用法在实践中和相关规范是否都支持，如果不支持，那么最好的方法是什么预加载动态导入的 Javascript 模块？

【问题讨论】：

标签： javascript html ecmascript-6 preload

【解决方案1】：

是的，rel="modulepreload" 也应该适用于 Javascript 中的动态 import() 调用。它应该将获取的模块放在用于所有静态和动态导入的 JS 模块映射中。

如果您阅读了您链接的规范，您会注意到它专门以这种情况为例：

以下代码显示了modulepreload 链接如何与import() 一起使用，以确保提前完成网络获取，因此当调用import() 时，模块已经准备好（但未评估）在module map:
<link rel="modulepreload" href="awesome-viewer.mjs">

<button onclick="import('./awesome-viewer.mjs').then(m => m.view())">
  View awesome thing
</button>

https://html.spec.whatwg.org/multipage/links.html#example-modulepreload-dynamic-import

【讨论】：