---
title: "modulepreload · Link relation · zhead"
canonical_url: "https://zhead.dev/link/modulepreload"
last_updated: "2026-08-10T16:29:02.418Z"
meta:
  description: "Fetches a JavaScript module early and stores it in the document's module map. Browsers may also fetch its dependencies."
  "og:description": "Fetches a JavaScript module early and stores it in the document's module map. Browsers may also fetch its dependencies."
  "og:title": "modulepreload · Link relation · 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

- [HTML Living Standard: Links](https://html.spec.whatwg.org/multipage/links.html#link-type-modulepreload)