Support for prefetch

[TCMiranda]

As documented here[1] workers can be preloaded. Since woker-loader abstracts the file's "url" I can't tell the best way to preload the script.

What would be appropriate approach to handle prefetching?
Thanks

[1] MDN Preloading content - The basics

[aprilmintacpineda]

almost 2019, still no answer?

[aprilmintacpineda]

Use https://github.com/GoogleChromeLabs/preload-webpack-plugin with the following config:

new PreloadWebpackPlugin({
  rel: 'preload',
  as: 'script',
  fileWhitelist: [/\.js$/],
  include: 'allAssets'
})

[sanbornhilland]

@aprilmintacpineda Can you confirm that using preload-webpack-plugin actually behaves as expected? I'm trying right now and there are a couple things that lead me to believe it's not doing what I want it to.

1. Running a lighthouse report gives me warnings about the worker scrips I'm trying to preload: A preload <link> was found for "foo.worker.js" but was not used by the browser.

2. I'm seeing several requests for the same resource which seems wrong.

[aprilmintacpineda]

@sanbornhilland

A preload was found for "foo.worker.js" but was not used by the browser already confirms that it works and was preloaded. The issue is that when you preload a particular file, the browser expects that you will use it immediately. If you wouldn't use it immediately, you could use prefetch instead.

Link prefetching is a browser mechanism, which utilizes browser idle time to download or prefetch documents that the user might visit in the near future ~MDN

More information at https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ

The reason why it said but was not used by the browser is because lighthouse only goes to the page where you ran it, it doesn't navigate around. Therefore, if you are only using it for a particular route, it will be preloaded BUT not used.

A word of warning, don't overuse preload as it consumes network data which you might need for something better, only use preload for resources that you would need immediately like fonts and your main/vendors JS files.

[sanbornhilland]

@aprilmintacpineda Gotcha. Thanks for the explanation that gives me some good information to keep moving forward with this.

Does that fact that two network requests show up not seem suspicious to you?

[aprilmintacpineda]

Now that you mentioned it, yeah it does look suspicious. Seems that a script tag triggered the first request and then a JS code triggered the second request. I'm not sure how and why that happened though.

[danielroe]

See https://bugs.chromium.org/p/chromium/issues/detail?id=946510 for some more info on why this is happening. The correct way to preload is almost certainly with as=worker but this is currently not supported.

[alexander-akait]

Let's close in favor https://github.com/webpack/webpack/projects/5#card-10780341, it should be solved on webpack side, workaround https://github.com/GoogleChromeLabs/preload-webpack-plugin, it will be part of core for webpack@5, sorry for delay and inconvenience, we really have a lot of work and we try to do everything faster