<zhead>
Link

modulepreload

Fetches a JavaScript module early and stores it in the document's module map. Browsers may also fetch its dependencies.

Code examples

Good example
<link rel="modulepreload" href="/scripts/app.mjs">
Fetches a module before a later module script or import needs it.
Avoid this example
<link rel="modulepreload" href="/scripts/app.mjs" as="style">
Uses a non-script destination, so the link does not meet the modulepreload requirements.

Recommendations

  • 01
    Preload only important modules
    Use it when late discovery would add a meaningful delay. Preloading a large module graph can compete with resources needed for rendering.
  • 02
    Configure cross-origin modules
    Module fetches use CORS. A cross-origin server must return the required CORS headers, while crossorigin controls the credentials mode.
  • 03
    Keep as script-like
    Omit as or use a script-like destination. Values such as style make the modulepreload link invalid.

Related documentation