Worker Preloading Techniques

Preloading a Web Worker used to be fairly difficult. Each of the pages below demonstrate a potential technique for doing so, with varying degrees of success.

To see the effect of preloading on these demos:

Open the demo, and open the DevTools Network tab
Ensure the "Disable Cache" checkbox is unchecked
Right-click the request table area and choose "Clear Browser Cache"
Reload the page and take a look at the network waterfall

For Module Workers:

Using <link rel="modulepreload">.
View Demo
Using <link rel="preload" as="script">.
View Demo

For Classic Workers:

Using <link rel="preload" as="worker">, which is not implemented by any browsers.
View Demo
Using <link rel="prefetch"> works, but prefetch only populates the HTTP cache - it won't pre-parse or store cached bytecode.
View Demo
Using <link rel="preload" as="script"> to preload a script, and a small "shim" Worker that loads the script using importScripts().
View Demo
Using <link rel="preload" as="script"> to preload a script, and an inline "shim" Worker that loads the script using importScripts().
View Demo