Intent to Implement: Link rel=modulepreload
Kunihiko Sakamoto
Contact emails
Implementation: ksak...@chromium.org
Spec: dom...@chromium.org
Explainer
Please refer to the design doc and the draft spec's explanatory material
Design doc/Spec
Spec: https://github.com/whatwg/html/pull/2383
Design doc: https://docs.google.com/document/d/1WebH4IOCswACUbaczx5cGQPVl5mnqcieOd4MRJM2syk/edit?usp=sharing
TAG review: https://github.com/w3ctag/design-reviews/issues/213
Summary
Add support for the "modulepreload" rel value in <link> element and Link: header, providing a way to initiate early (and high-priority) loading of module scripts.
Motivation
Preload is a way to instruct browsers to initiate early and high-priority loading of subresources known to be used in the document. However, existing link rel=preload doesn’t just work for module scripts for a number of a reasons:
Module scripts are fetched with "omit" credentials mode by default, but there's no way to use this mode in <link rel=preload>.
link rel=preload doesn’t tell if the preloaded script is a classic script or a module script which becomes important for compiling or fetching dependent sub modules.
The processing model of rel=preload doesn't fit well with modules, so introducing a new "as" value for link rel=preload wouldn’t work either.
A new rel value "modulepreload" for <link> has been proposed to solve these issues. This will fetch a module script and populate the module map, and optionally fetch dependencies of the module script.
While our initial implementation of modulepreload will not follow the dependency tree, it can still be used to reduce the latency caused by dependencies discovery. Concretely, one could create a flat list of dependent modules and enumerate them via <link rel=modulepreload> tags. We tested this approach with non-bundled versions of two popular libraries (moment.js and three.js), and observed 1.3x ~ 1.8x faster loading times on a "3G Fast" connection.
Risks
Interoperability and Compatibility
Medium. Chrome would be the first browser to support this feature.
Edge: No signals
Firefox: No signals
Safari: No signals
Web developers: Positive in wanting this ability, although some are unsure about the specific shape of the solution, wishing rel=preload would "just work".
Ergonomics
This will be used along with <script type=”module”>, to improve the latency of loading module graphs or to pre-load module graphs that will be loaded later.
Activation
This is an optional feature, so it’s easy for developers to take advantage of. Unsupported browsers would just ignore <link> with rel=modulepreload.
Debuggability
Preloaded modules would be visible in the devtools network panel, and the "Initiator" column would reference the <link rel=modulepreload> element.
Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?
Yes.
Link to entry on the feature dashboard
https://www.chromestatus.com/features/5762805915451392
Requesting approval to ship?
No.