如何预加载 Web Worker 资产

Question

我们目前正在我们公司的网站上实现web-workers（基于 ReactJS-Redux），通过调用 API 端点来执行用户数据的初始同步（例如：收藏夹列表、丢弃列表...）。

实施是成功的，但 Lighthouse 的审计显示了一个性能问题，因为我们没有预加载这个资产。尽管我们并不真正关心它，但它非常“烦人”，我们想摆脱它。

我们试图“预加载”它但没有成功，即使遵循W3C 规范。值为 'worker' 的 'as' 属性似乎是正确答案，但谷歌浏览器未将其检测为有效值。以下是我们尝试过的一些变体：

<link rel="preload" href="userSync.worker.js" as="script" type="text/javascript">
<link rel="preload" href="userSync.worker.js" as="fetch" type="text/javascript">
<link rel="preload" href="userSync.worker.js" as="worker" type="text/javascript">

我们还尝试了 'crossorigin' 属性的不同变体，但没有成功。

有没有人知道可能出什么问题？

谢谢！

Answer 1

尝试添加属性：crossorigin =“anonymous”

根据灯塔工具（Chrome 开发工具 -> 审核）：发现“ https://yourworker.js ”的预加载，但浏览器未使用该预加载。检查您是否正确使用该crossorigin属性。

编辑：仍然无法工作，我也被困住了。我确实注意到 Chrome 网络中预加载的“类型”显示为“脚本”，但加载时的“类型”是“x-javascript”。但是，如果您在预加载中指定 'x-javascript' 作为 as=""，它仍然不起作用