preloadModule

preloadModule("https://example.com/module.js", { as: "script" });

• Référence
  • preloadModule(href, options)
• Utilisation
  • Précharger lors du rendu
  • Précharger dans un gestionnaire d’événement

Référence

preloadModule(href, options)

Pour précharger un module ESM, appelez la fonction preloadModule de react-dom.

import { preloadModule } from 'react-dom';

function AppRoot() {
  preloadModule("https://example.com/module.js", { as: "script" });
  // ...
}

Voir d’autres exemples plus bas.

La fonction preloadModule suggère au navigateur de commencer à télécharger un module donné, ce qui peut faire gagner du temps.

Paramètres

• href : une chaîne de caractères. L’URL du module que vous souhaitez télécharger.
• options : un objet. Il contient les propriétés suivantes :
  • as : une chaîne de caractères obligatoire. Doit être 'script'.
  • crossOrigin : une chaîne de caractères. La politique CORS à utiliser. Les valeurs possibles sont anonymous et use-credentials.
  • integrity : une chaîne de caractères. Une empreinte cryptographique du module afin de vérifier son authenticité.
  • nonce : une chaîne de caractères. Un nonce cryptographique autorisant le module dans le cadre d’une Politique de Sécurité de Contenu (CSP) stricte.

Valeur renvoyée

preloadModule ne renvoie rien.

Limitations

• Plusieurs appels à preloadModule avec le même href ont le même effet qu’un unique appel.
• Côté client, vous pouvez appeler preloadModule n’importe où : lors du rendu d’un composant, dans un Effet, dans un gestionnaire d’événement, etc.
• Lors d’un rendu côté serveur ou du rendu de Composants Serveur, preloadModule n’a d’effet que si vous l’appelez lors du rendu d’un composant ou dans une fonction asynchrone issue du rendu d’un composant. Tout autre appel sera ignoré.

Utilisation

Précharger lors du rendu

Appelez preloadModule lors du rendu d’un composant si vous savez que ses enfants auront besoin de charger un module spécifique.

import { preloadModule } from 'react-dom';

function AppRoot() {
  preloadModule("https://example.com/module.js", { as: "script" });
  return ...;
}

Si vous souhaitez que le navigateur évalue le module immédiatement après chargement (plutôt que simplement le charger), utilisez plutôt preinitModule. Si vous souhaitez charger un script qui n’est pas un module ESM, utilisez preload.

Précharger dans un gestionnaire d’événement

Appelez preloadModule depuis un gestionnaire d’événement avant de passer à une page ou un état qui auront besoin du module. Ça permet de déclencher le processus plus tôt que si vous l’appeliez au sein de la nouvelle page ou suite au nouvel état.

import { preloadModule } from 'react-dom';

function CallToAction() {
  const onClick = () => {
    preloadModule("https://example.com/module.js", { as: "script" });
    startWizard();
  }
  return (
    <button onClick={onClick}>Démarrer l’assistant</button>
  );
}