rel="modulepreload"

Baseline 2023

Newly available

Depuis ⁨September 2023⁩, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.

Le mot-clé modulepreload pour l'attribut rel de l'élément HTML <link> offre un moyen déclaratif de précharger un module JavaScript, de l'analyser, de le compiler et de le stocker dans la carte des modules du document pour une exécution ultérieure.

Le préchargement permet de télécharger les modules et leurs dépendances dès le début, ce qui peut réduire significativement le temps total de téléchargement et de traitement. Cela permet aux pages de récupérer les modules en parallèle, au lieu de les charger séquentiellement à mesure que chaque module est traité et que ses dépendances sont découvertes. Attention cependant : il ne faut pas tout précharger ! Le choix des modules à précharger doit être équilibré avec les autres opérations, afin d'éviter de pénaliser l'expérience utilisateur·ice.

Les liens avec rel="modulepreload" sont similaires à ceux avec rel="preload". La principale différence est que preload télécharge simplement le fichier et le place dans le cache, tandis que modulepreload récupère le module, l'analyse, le compile et l'ajoute à la carte des modules pour qu'il soit prêt à être exécuté.

Lorsque vous utilisez modulepreload, le mode de requête est toujours cors, et la propriété crossorigin détermine le mode d'identification. Si crossorigin est défini sur anonymous ou une chaîne de caractères vide ("") (par défaut), alors le mode d'identification est same-origin, et les identifiants utilisateur·ice·s comme les cookies et l'authentification ne sont envoyés que pour les requêtes du même domaine. Si crossorigin est défini sur use-credentials, alors le mode d'identification est include, et les identifiants sont envoyés pour les requêtes du même domaine et inter-domaines.

L'attribut as est optionnel pour les liens avec rel="modulepreload" et sa valeur par défaut est "script". Il peut être défini sur "script" ou toute destination similaire à un script, comme "audioworklet", "paintworklet", "serviceworker", "sharedworker" ou "worker". Un Event nommé "error" est déclenché sur l'élément si une autre destination est utilisée.

Un navigateur peut également choisir de récupérer automatiquement les dépendances du module. Attention : il s'agit d'une optimisation propre à chaque navigateur — la seule façon de garantir que tous les navigateurs préchargeront les dépendances d'un module est de les définir individuellement ! De plus, les événements nommés load ou error sont déclenchés immédiatement après le succès ou l'échec du chargement des ressources définies. Si les dépendances sont récupérées automatiquement, aucun événement supplémentaire n'est déclenché dans le thread principal (mais il est possible de surveiller les requêtes dans un service worker ou sur le serveur).

Exemples

Considérez l'exemple basic-modules ^(angl.) (version en ligne ^(angl.)), présenté dans le guide Modules JavaScript.

La structure de fichiers est la suivante, avec le module principal main.js qui importe statiquement deux modules dépendants modules/canvas.js et modules/square.js via l'instruction import.

index.html
main.js
modules/
    canvas.js
    square.js

Le code HTML ci-dessous montre comment main.js est récupéré via un élément <script>. Ce n'est qu'après le chargement de main.js que le navigateur découvre et télécharge les deux modules dépendants.

html

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <title>Exemple de module JavaScript basique</title>
    <script type="module" src="main.js"></script>
  </head>
  <body></body>
</html>

Le code HTML suivant met à jour l'exemple pour utiliser des éléments <link> avec rel="modulepreload" pour le fichier principal et chaque module dépendant. C'est bien plus rapide car les trois modules commencent à être téléchargés de façon asynchrone et en parallèle avant d'être nécessaires. Au moment où main.js est analysé et que ses dépendances sont connues, elles ont déjà été récupérées et téléchargées.

html

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <title>Exemple de module JavaScript basique</title>
    <link rel="modulepreload" href="main.js" />
    <link rel="modulepreload" href="modules/canvas.js" />
    <link rel="modulepreload" href="modules/square.js" />
    <script type="module" src="main.js"></script>
  </head>
  <body></body>
</html>

Spécifications

Specification
HTML # link-type-modulepreload

Compatibilité des navigateurs

Voir aussi

Chargement spéculatif pour une comparaison entre <link rel="modulepreload"> et d'autres fonctionnalités d'amélioration des performances.
Préchargement des modules ^(angl.) sur web.dev

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨20 oct. 2025⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content