提问人:Jonas Äppelgran 提问时间:10/12/2023 更新时间:10/13/2023 访问量:36
我可以同时使用 preload 和 modulepreload 来最大限度地提高浏览器兼容性吗?
Can I use both preload and modulepreload to maximise browser compatibility?
问:
我想预加载并提前解析我的 javascript 模块代码。为此,我使用它正是这样做的。但是 modulepreload 直到 3 周前才在 Safari 中引入,我想确保那些使用 Safari 17 之前版本的用户仍然拥有最快的体验。我可以先扔进去还是会有副作用?my-module.js
link="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>
答:
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"
评论