如何预加载网络工作者资产

Question

我们目前正在我们公司的网站上实现web-workers（基于ReactJS-Redux），通过调用API 端点。

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

我们尝试“预加载”它但没有成功，即使关注W3C specs。值为 'worker' 的 'as' 属性似乎是正确答案，但 Google Chrome 并未将其检测为有效值。以下是我们尝试过的一些变体：

<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

根据 Module Workers 上的this post：

经典工作者有自己的“工作者”资源类型用于预加载，但没有浏览器实现<link rel="preload" as="worker">。因此，可用于预加载 Web Worker 的主要技术是使用 <link rel="prefetch">。

Chrome 现在支持modulepreload。但出于兼容性原因，prefetch 仍然是一个有效（但不完美）的解决方案。

Answer 2

worker类型是module怎么样

const worker = new Worker('worker.js', { type: 'module' });

Answer 3

使用预取而不是预加载： <link rel="prefetch" href="userSync.worker.js" as="worker" />

在这种情况下，worker 在调用时会在磁盘缓存中。

Answer 4

尝试添加属性： crossorigin="匿名"

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

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