Skip to content

Instantly share code, notes, and snippets.

@stefanjudis

stefanjudis/index.html

Last active December 6, 2018 16:24
Show Gist options
  • Save stefanjudis/607304c789bb98e7b7a659509a10d9a2 to your computer and use it in GitHub Desktop.
Save stefanjudis/607304c789bb98e7b7a659509a10d9a2 to your computer and use it in GitHub Desktop.
Download ZIP
Preloading ES6 modules?
Raw
index.html
<html>
<head>
<title>ES6 modules tryout</title>
<!-- does this make sense for es module supporting browsers -->
<!-- this works fine for Safari Preview but -->
<!-- this will now trigger downloads for browsers that don't understand type="module" :( -->
<link rel="preload" href="./dist/modules/dep-1.js" as="script">
<link rel="preload" href="./dist/modules/dep-2.js" as="script">
<!-- is there instead a way to detect ES module support and inject these with an inline script? -->
<script>
// some ES modules feature detection magic here
// and inject rel="preload" elements?
</script>
<!-- in case ES6 modules are supported -->
<!-- will trigger requests for dep-1.js and dep-2.js -->
<script src="dist/modules/index.js" type="module"></script>
<!-- in case ES6 modules aren't support -->
<script src="dist/bundle.js" nomodule defer></script>
</head>
<body>
<!-- ... -->
</body>
</html>
@jakub-g
Copy link

jakub-g commented Dec 6, 2018

this will now trigger downloads for browsers that don't understand type="module"

This is a good observation, although the only browser which shipped preload before ES modules is Chrome.
The only affected browsers are hence Chromium 50->60 based browsers.

https://caniuse.com/#feat=link-rel-preload
https://caniuse.com/#feat=es6-module

Having said that there are other problems with preloading modules with link preload:
https://developers.google.com/web/updates/2017/12/modulepreload#ok_so_why_doesnt_link_relpreload_work_for_modules

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment