我想在my-module.js中预加载并提前解析我的JavaScript模块代码。为此，我使用link="modulepreload"，它正好可以做到这一点。但是模块预加载直到3周前才在Safari中引入，我想确保那些使用Safari 17之前版本的人仍然拥有最快的体验。我可以只扔在一个link="preload" as="script"之前，或将有副作用？
在<head>中：
<link rel="modulepreload" href="my-module.js" />my-module.js:
export default function () {
// ...
}使用my-module.js内联：
<script type="module">
import mm from "my-module.js";
mm();
</script>为了这个问题，让我们假设我确实需要稍后执行模块脚本，就像在</body>之前一样，而不仅仅是直接在<head>中执行。
1条答案
按热度按时间jv4diomz1#
答案似乎是：没有
我使用
rel="preload"和rel="modulepreload"进行了测试。不同的顺序没有任何区别。Safari v17有我想要的行为-资源是预加载的，只下载一次。
Chrome v117和Firefox v118都下载资源两次。不太好。而且如果我只使用
rel="preload"作为模块脚本（我稍后导入），它们也会加倍下载。当结合
rel="preload"和模块脚本时，双重下载上有一个Chromium bug。它说固定的，但它不是（或者它可能曾经是）和阅读的讨论，它似乎像双下载是根据规格。我猜解决方案是在使用JavaScript模块时只使用
rel="modulepreload"。并尽早导入重要模块。