Conseils de ressources : `modulepreload`
Préchargez les modules ES pour accélérer le démarrage de JavaScript.
Conseils de ressources : `modulepreload` est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.
Pourquoi le préchargement des modules existe
Les modules ES forment un graphe de dépendances : un module d’entrée en importe d’autres, qui en importent à leur tour. Sans aide, chaque niveau de l’arbre n’est découvert qu’après l’analyse syntaxique du niveau précédent, ce qui produit une cascade séquentielle qui dégrade fortement les performances de chargement.
Fonctionnement du préchargement des modules
<link rel="modulepreload" href="/app.js"> indique au navigateur de récupérer immédiatement, en parallèle, le module AND les modules qu’il importe transitivement. Lorsque l’élément <script type="module"> s’exécute, le graphe entier se trouve déjà dans le cache.
Comparaison avec le préchargement
Le préchargement récupère également les fichiers en parallèle, mais il ne connaît pas les instructions d’importation : précharger un fichier de module ne précharge pas ses dépendances. Le préchargement des modules suit automatiquement les importations, ce qui constitue précisément son intérêt.
<link rel="modulepreload" href="/app.js">
<script type="module" src="/app.js"></script>Où le placer
Dans l’élément <head>, aussi tôt que possible. Le navigateur lance immédiatement la requête de préchargement et continue d’analyser le HTML. Lorsque l’élément <script type="module"> correspondant est rencontré plus loin dans le document, le fichier se trouve déjà en mémoire.
Découverte et parcours du graphe
Le navigateur analyse le module préchargé à la recherche d’instructions d’importation, puis lance récursivement des récupérations parallèles pour chaque adresse URL importée. L’utilisateur paie le coût d’un aller-retour par niveau, mais bénéficie du parallélisme au sein de chaque niveau, ce qui raccourcit considérablement le chemin critique.
Utilisation avec les outils de regroupement
Les outils modernes de regroupement (Vite, Rollup, Webpack 5 ou version ultérieure) génèrent automatiquement des balises de préchargement des modules pour les fragments issus de la division du code. Dans les applications assemblées manuellement, générez-les à partir du graphe d’importation lors de la construction afin que la liste reste exacte lorsque des modules sont ajoutés ou supprimés.
Considérations relatives à CrossOrigin
Pour les préchargements de modules provenant d’une autre origine, incluez crossorigin="anonymous". Cela correspond au mode de récupération par défaut de <script type="module"> et garantit que la copie préchargée est réutilisée au lieu d’être récupérée une seconde fois sans en-têtes CORS.
Prise en charge par les navigateurs
Le préchargement des modules est pris en charge par Chrome, Edge, Safari et les versions récentes de Firefox. Dans les anciennes versions de Firefox, il est ignoré silencieusement : les modules fonctionnent toujours, mais sans le bénéfice du préchargement. Aucun polyfill n’est nécessaire ; dans le pire des cas, le chargement est légèrement plus lent sur les navigateurs obsolètes.
Limiter la taille du graphe
Précharger des centaines de modules gaspille de la bande passante pour du code que l’utilisateur n’exécutera peut-être jamais. Préchargez uniquement les fragments d’entrée au niveau des routes, et non ceux chargés de manière fortement différée. Faites confiance à la prélecture (ou à l’importation à la demande) pour les chemins de code rarement utilisés.
Combinaison avec d’autres indications
Pour les images et les polices présentes dans le même élément head, combinez librement les mécanismes : préconnexion aux réseaux de diffusion de contenu tiers, préchargement des polices critiques, préchargement des modules d’entrée et prélecture des ressources de la page suivante. Ces indications n’interfèrent pas entre elles.
Vérification
Consultez le panneau Réseau : avec le préchargement des modules, les importations du deuxième niveau apparaissent comme des requêtes parallèles qui commencent presque en même temps que celle du module d’entrée. Sans lui, elles apparaissent de manière échelonnée, chaque requête ne commençant qu’après la fin de l’analyse du module parent.
Vérification des connaissances
Que fait le préchargement des modules qu’un préchargement standard du même fichier de module ne fait pas ?
Résumé
Le préchargement des modules élimine la cascade des modules ES en récupérant le module d’entrée et ses importations en parallèle avant l’exécution. Placez-le tôt dans <head>, générez-le à partir du graphe de construction, définissez crossorigin pour les modules provenant d’une autre origine et limitez sa portée aux points d’entrée des routes afin d’éviter de gaspiller de la bande passante.
Questions Fréquemment Posées
La leçon « Conseils de ressources : `modulepreload` » est-elle gratuite ?
Oui — le texte complet de « Conseils de ressources : `modulepreload` » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Conseils de ressources : `modulepreload` » ?
Préchargez les modules ES pour accélérer le démarrage de JavaScript. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer HTML Academy ?
Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Conseils de ressources : `modulepreload` » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?
Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Attributs `async` et `defer`
- Préchargement, prélecture et préconnexion
- Chargement différé des images : `loading=lazy`
- Conseils de ressources : `modulepreload`