Fix preload link headers not working with JavaScript modules #185
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Follow-up to #171 and #175 where they broke because we went from scripts to modules.
Part of #132
Before this PR, we were seeing these warning in the Chrome devtools console:
This is caused by a credentials mode mismatch between the
<script type="module">
tag and theLink
header. A<script type="module">
with nocrossorigin
attribute indicates a credentials mode ofomit
and a naiveLink: </foo-url>; rel=preload; as=script;
has a default credentials mode ofsame-origin
, hence the mismatch and warning we're seeing.We could set the credentials mode to match using
Link: </foo-url>; rel=preload; as=script; omit
but there is an even better option! We can use the dedicatedLink: </foo-url>; rel=modulepreload
link type which not only downloads and puts the the file in the cache like a normal preload but the browser also knows it's a JavaScript module now and can parse/compile it so it's ready to go.Future consideration: Adding
nopush
to preload link headers. Many servers initiate an HTTP/2 Server Push when they encounter a preload link in HTTP header form otherwise. Do we want/care about that (or maybe we don't)? (mentioned in https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf#6f54)Dev notes
Preload
Link
headers:Cloudflare: