javascript - 在 HTML 中使用 `import(modules)` 预加载动态 Javascript ``？

Question

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

developer.mozilla.org

最近 <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 模块的最佳方式是什么？

Answer 1

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

---

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

The following code shows how modulepreload links can be used in conjunction with import() to ensure network fetching is done ahead of time, so that when import() is called, the module is already ready (but not evaluated) in the 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