Outils HTML

Gratuit Generateur de balises modulepreload

Générez des balises link modulepreload pour les modules ES dans Vite, Astro et sites statiques modernes.

Chargement de l'outil...

Qu'est-ce que Generateur de balises modulepreload ?

Modulepreload est un prechargement specialise pour les scripts de module ES. Contrairement au preload standard, modulepreload comprend les graphes de dependances des modules. Il est couramment utilise dans les sorties Vite et Astro. Il necessite l'attribut crossorigin correct pour les modules inter-origines.

Réponse rapide

Utilisez modulepreload pour recuperer, analyser et compiler de manière speculative les dependances de modules ES avant qu'elles ne soient necessaires. Il fonctionne comme preload mais est concu specifiquement pour les scripts de module JavaScript.

Last updated: 2026-05-25

Limites

  • Modulepreload n'est efficace que pour les scripts de module ES (type='module'). Il ne s'applique pas aux scripts classiques.
  • La compatibilite navigateur est en retard par rapport au preload standard. Firefox a ajoute la prise en charge dans 115+, Safari dans 17.2+.
  • Modulepreload recupere le module mais ne l'execute pas. L'execution a toujours lieu lorsque la balise de script du module est rencontree.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

  1. Saisissez le chemin ou l'URL du script du module.
  2. Choisissez si le module est de meme origine ou d'origine croisee.
  3. L'outil ajoute l'attribut crossorigin correct pour le type d'origine selectionne.
  4. Copiez la balise dans l'en-tete de la page avant les autres scripts de module.

A quoi il sert

  • Ajouter modulepreload pour un module d'entree JavaScript construit avec Vite.
  • Precharger un fragment de module ES partage pour des transitions de page plus rapides.
  • Optimiser le chargement des modules sur un site statique construit avec Astro ou SvelteKit.

Cas d'usage

Exemples concrets

Exemple

Prechargement de fragment Vite

Un projet Vite produit un fragment vendor utilise par plusieurs pages. Modulepreload le recupere tot, rendant la navigation entre les pages instantanee.

Exemple

Site Astro avec modules heberges sur CDN

Un site statique construit avec Astro utilise modulepreload pour le script d'entree principal avec crossorigin pour l'hebergement sur CDN.

Erreurs frequentes

  • Utiliser le preload standard au lieu de modulepreload pour les modules ES.
  • Oublier le crossorigin sur les URL de modules inter-origines.
  • Ajouter modulepreload pour des scripts qui ne sont pas des modules.

Vérification

  1. Ouvrez le panneau Reseau de Chrome DevTools et verifiez que les scripts de modules recuperes via modulepreload apparaissent tot dans la cascade.
  2. Verifiez le panneau Couverture pour confirmer que le module est utilise et non recupere inutilement.

FAQ

Questions sur Generateur de balises modulepreload

Puis-je utiliser modulepreload pour des scripts non-module ?

Non. Utilisez le preload standard pour les scripts classiques. Modulepreload est specifiquement concu pour les graphes de dependances des modules ES.

Quels navigateurs prennent en charge modulepreload ?

Chrome 66+, Edge 79+, Firefox 115+, Safari 17.2+. Son utilisation est sûre en tant qu'amelioration progressive.

Modulepreload fonctionne-t-il avec les import maps ?

Oui. Modulepreload resout les specificateurs nus via les import maps, tout comme le font les importations de modules ES. Si vous prechargez un module qui utilise des specificateurs nus, le navigateur suit l'import map pour resoudre les dependances.

Quelle est la difference entre modulepreload et le preload standard pour les modules ES ?

Modulepreload est concu specifiquement pour les graphes de dependances des modules ES. Contrairement au preload standard, il ne se contente pas de recuperer le module cible mais analyse son arbre de dependances et recupere toutes les importations statiques.

Outils lies

Autres outils outils html

A essayer aussi

A essayer aussi