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

Question

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

developer.mozilla.org

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

developers.google.com

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

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

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

Preload dynamic Javascript `import(modules)` with `<link/>` in HTML?

html

javascript

preload

ecmascript-6