最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to preload web worker asset - Stack Overflow

programmeradmin1浏览0评论

We are currently implementing web-workers in our pany's website (based on ReactJS-Redux) to execute an initial synchronization of the user's data (such as: a list of favorites, a list of discarded...) by calling an API endpoint.

The implementation was successful, but Lighthouse's Audit is showing a performance issue because we aren't preloading this asset. Even though we aren't really concerned about that, it is quite "annoying" and we would like to get rid of it.

We have tried to 'preload' it without success, even following W3C specs. The 'as' attribute with value 'worker' seems to be the correct answer, but Google Chrome doesn't detect it as a valid value. The following are some variations that we tried:

<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">

We have also tried the different variations of the 'crossorigin' attribute without success.

Has anybody an idea of what could be wrong?

Thanks!

We are currently implementing web-workers in our pany's website (based on ReactJS-Redux) to execute an initial synchronization of the user's data (such as: a list of favorites, a list of discarded...) by calling an API endpoint.

The implementation was successful, but Lighthouse's Audit is showing a performance issue because we aren't preloading this asset. Even though we aren't really concerned about that, it is quite "annoying" and we would like to get rid of it.

We have tried to 'preload' it without success, even following W3C specs. The 'as' attribute with value 'worker' seems to be the correct answer, but Google Chrome doesn't detect it as a valid value. The following are some variations that we tried:

<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">

We have also tried the different variations of the 'crossorigin' attribute without success.

Has anybody an idea of what could be wrong?

Thanks!

Share Improve this question edited Feb 6, 2019 at 13:05 pmarfany asked Feb 6, 2019 at 9:42 pmarfanypmarfany 1211 silver badge5 bronze badges
Add a ment  | 

4 Answers 4

Reset to default 2

Try adding the attribute: crossorigin="anonymous"

As per the lighthouse tool (Chrome Dev Tools -> Audit): A preload was found for "https://yourworker.js" but was not used by the browser. Check that you are using the crossorigin attribute properly.

Edit: still not working, I'm stuck too. I did notice that the 'type' in Chrome network for the preload shows as 'script', but the 'type' when its loaded is 'x-javascript'. However, if you specify 'x-javascript' as the as="" in the preload, it still doesn't work

According to this post on Module Workers:

Classic workers had their own "worker" resource type for preloading, but no browsers implemented <link rel="preload" as="worker">. As a result, the primary technique available for preloading web workers was to use <link rel="prefetch">.

Chrome has now support for modulepreload. But for patibility reasons, prefetch is still a valid (but not perfect) solution.

Use prefetch instead of preload: <link rel="prefetch" href="userSync.worker.js" as="worker" />

In this case, the worker will be in the disk cache when called.

How about worker type is module

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

评论列表(0)

  1. 暂无评论