我可以同时使用 preload 和 modulepreload 来最大限度地提高浏览器兼容性吗?

Can I use both preload and modulepreload to maximise browser compatibility?

提问人:Jonas Äppelgran 提问时间:10/12/2023 更新时间:10/13/2023 访问量:36

问:

我想预加载并提前解析我的 javascript 模块代码。为此,我使用它正是这样做的。但是 modulepreload 直到 3 周前才在 Safari 中引入,我想确保那些使用 Safari 17 之前版本的用户仍然拥有最快的体验。我可以先扔进去还是会有副作用?my-module.jslink="modulepreload"link="preload" as="script"

在:<head>

<link rel="modulepreload" href="my-module.js" />

我的模块.js:

export default function () {
    // ...
}

内联使用 my-module.js:

<script type="module">
    import mm from "my-module.js";
    mm();
</script>

为了这个问题,让我们假设我确实需要稍后执行模块脚本,就像以前一样,而不仅仅是直接在 .</body><head>

JavaScript HTML es6-modules 预加载

评论


答:

0赞 Jonas Äppelgran 10/13/2023 #1

答案似乎是:

我同时使用 和 进行了测试。不同的顺序没有任何区别。rel="preload"rel="modulepreload"

Safari v17 具有我想要的行为 - 资源已预加载,仅下载一次。

Chrome v117 和 Firefox v118 都会下载资源两次。不好。如果我只用于模块脚本(我稍后导入),它们也会加倍下载。rel="preload"

合并和模块脚本时,双重下载存在 Chromium 错误。它说已修复,但事实并非如此(或者可能曾经是),并且阅读讨论似乎双重下载符合规范。rel="preload"

我想解决方案是仅在使用 javascript 模块时使用。并尽早导入重要模块。rel="modulepreload"