Preloading module doesn't work

[anthonygore]

Referring to the branch preload and to the file index.html:

https://github.com/anthonygore/vue-single-file-js-components/blob/preload/index.html

app.js imports SingleFileComponent.js. To speed the app up, I thought I could preload SingleFileComponent.js by adding this to index.html:

<link rel="preload" href="./SingleFileComponent.js" as="script">

But it doesn't work. I get this warning in Chome 61:

It also seems that Chrome loads SingleFileComponent.js again even though it should already be available.

[jakearchibald]

Could you reduce this some more? Or at least create an example of the bug that I can run by clicking a link?

For instance, here's a script loading another preloaded script, but the preloading works fine here, so there's something different between my example & yours. You'll probably discover what that is while you're making the reduced test.

This might help: https://css-tricks.com/reduced-test-cases/

[anthonygore]

Thanks for your patience.

Here's the live demo: http://preloadjsmodules.pancakeapps.com/

Here are the files for this reduced test case: https://github.com/anthonygore/preload-js-modules

[jakearchibald]

Cheers! Here's a further reduced case with a fix: https://module-load-preload.glitch.me/.

I was roughly in the right direction with https://twitter.com/jaffathecake/status/908561563212144643. You need the crossorigin attribute on both the script and the preload to put them into the same request mode.

[alexjoverm]

@jakearchibald thanks for your time on this!

Got some questions though:

• Maybe I missed something, but what/where's exactly the fix? That reduced test case still shows that warning.
• They are on the same origin, right? Since is a relative file path
• What'd be the correct value? anonymous or use-credentials ?

[jakearchibald]

@alexjoverm

but what/where's exactly the fix?

The fix is putting crossorigin on both the module script and the preload. This is because modules are fetched without credentials by default. Although this looks set to change.

That reduced test case still shows that warning

You're talking about https://module-load-preload.glitch.me/ yeah? I don't see a warning in Chrome 61 or 63. Which version are you using?

What'd be the correct value?

The default value is fine (which is anonymous). However, this will send credentials for same origin. Yeah, it's weird. I brought it up on the spec, and it looks like it'll be changed.

[anthonygore]

Thanks, @jakearchibald. I'm on Chrome 61 and that fixed it perfectly for me.

[alexjoverm]

I was on Chrome 60. Maybe that's the reason.

Thanks a lot for the explanations btw, very helpful and clear!