preinitModule

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

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

Référence

preinitModule(href, options)

Pour préinitialiser un module ESM, appelez la fonction preinitModule de react-dom.

import { preinitModule } from 'react-dom';

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

Voir d’autres exemples plus bas.

La fonction preinitModule suggère au navigateur de commencer à télécharger puis d’évaluer un module donné, ce qui peut faire gagner du temps. Les modules que vous passez à preinitModule sont exécutés dès qu’ils ont terminé leur chargement.

Parameters

• href : une chaîne de caractères. L’URL du module que vous souhaitez télécharger et évaluer.
• options : un objet. Il contient les propriétés suivantes :
  • as : une chaîne de caractères obligatoire. La seule valeur autorisée est 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 de la ressource afin de vérifier son authenticité.
  • nonce : une chaîne de caractères. Un nonce cryptographique autorisant la ressource dans le cadre d’une Politique de Sécurité de Contenu (CSP) stricte.

Valeur renvoyée

preinitModule ne renvoie rien.

Limitations

• Plusieurs appels à preinitModule avec le même href ont le même effet qu’un unique appel.
• Côté client, vous pouvez appeler preinitModule 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, preinitModule 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éinitialisation lors du rendu

Appelez preinitModule lors du rendu d’un composant si vous savez que ses enfants auront besoin de charger un module spécifique, et que vous acceptez d’évaluer ce module immédiatement après son chargement.

import { preinitModule } from 'react-dom';

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

Si vous souhaitez que le navigateur télécharge mais n’évalue pas le module immédiatement, utilisez plutôt preload. Si vous souhaitez charger et évaluer un script qui n’est pas un module ESM, utilisez preinit.

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

Appelez preinitModule depuis un gestionnaire d’événement avant de passer à une page ou un état qui auront besoin de modules. Ç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 { preinitModule } from 'react-dom';

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