能否同时使用preload与modulepreload兼容Safari旧版本并优化加载？

你完全可以在现有modulepreload标签前添加rel="preload" as="script"来兼容Safari 17之前的版本，不会产生任何负面影响，具体原因和细节如下：

为什么可行？ #

• 支持modulepreload的浏览器：这类浏览器会识别并处理modulepreload，同时浏览器的缓存机制会自动复用preload发起的下载请求，不会重复下载同一份my-module.js。
• 旧版Safari（17之前）：这类浏览器不认识modulepreload，但会执行preload指令提前下载脚本文件。等到后续的<script type="module">执行时，脚本已经在缓存里了，能大幅提升加载速度，达到和modulepreload类似的优化效果。

修改后的代码 #

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

注意事项 #

• 两个link标签的href必须完全一致，确保缓存能正确复用。
• 不需要给preload标签加type="module"，因为preload只负责提前下载资源，不会执行它，后续的模块脚本会正确解析这份文件。
• 你的模块是在</body>前执行，提前预下载不会触发脚本提前执行，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Jonas Äppelgran