Question

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

实施成功，但是Lighthouse的Audit正在显示性能问题，因为我们没有预加载此资产。即使我们并不真正担心，它还是很“烦人”，我们希望摆脱它。

即使在遵循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

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

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

编辑：仍然无法正常工作，我也遇到了麻烦。我确实注意到，Chrome网络中用于预加载的“类型”显示为“脚本”，但是加载时的“类型”是“ x-javascript”。但是，如果您在预加载中将“ x-javascript”指定为as =“”，则仍然无法使用

Answer 2

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

在这种情况下，工作程序在被调用时将位于磁盘缓存中。

Answer 3

module的工作人员类型如何

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

Answer 4

根据模块工作人员上的this post：

经典工作程序具有自己的“工作程序”资源类型以进行预加载，但是没有浏览器实现prefetch。结果，可用于预加载Web Worker的主要技术是使用ArrayList<Int>。

Chrome现在支持DataArrayInArray02。但是出于兼容性原因，val dataChildrenArray = ArrayList<Int>()仍然是有效（但不是完美）的解决方案。

如何预加载Web Worker资产

4 个答案: