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

Posted 2023-02-22

【中文标题】如何预加载网络工作者资产

【英文标题】：How to preload web worker asset

【发布时间】：2019-06-30 05:19:38

【问题描述】：

我们目前正在我们公司的网站上实现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' 属性的不同变体，但均未成功。

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

谢谢！

【参考方案1】：

根据 Module Workers 上的this post：

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

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

【参考方案2】：

worker类型是module怎么样

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

【参考方案3】：

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

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

【讨论】：

如果使用as属性，预取似乎是错误的：w3schools.com/tags/att_link_rel.asp

至少，你应该解释一下为什么不能使用预加载：bugs.chromium.org/p/chromium/issues/detail?id=946510这是我发现的。

【参考方案4】：

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

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

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