preinitModule

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

• Referencia
  • preinitModule(href, options)
• Uso
  • Precarga durante el renderizado
  • Precarga en un manejador de eventos

Referencia

preinitModule(href, options)

Para preinicializar un módulo ESM, llama a la función preinitModule de react-dom.

import { preinitModule } from 'react-dom';

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

Ver más ejemplos abajo.

La función preinitModule proporciona al navegador una señal de que debería comenzar a descargar y ejecutar el módulo dado, lo cual puede ahorrar tiempo. Los módulos que preinicializas se ejecutan cuando terminan de descargarse.

Parámetros

• href: un string. La URL del módulo que deseas descargar y ejecutar.
• options: un objeto. Contiene las siguientes propiedades:
  • as: un string requerido. Debe ser 'script'.
  • crossOrigin: un string. La política de CORS a utilizar. Sus valores posibles son anonymous y use-credentials.
  • integrity: un string. Un hash criptográfico del módulo, para verificar su autenticidad.
  • nonce: un string. Un nonce criptográfico para permitir el módulo cuando se utiliza una Política de Seguridad de Contenido estricta.

Devuelve

preinitModule no devuelve nada.

Advertencias

• Múltiples llamadas a preinitModule con el mismo href tienen el mismo efecto que una sola llamada.
• En el navegador, puedes llamar a preinitModule en cualquier situación: mientras renderizas un componente, en un Efecto, en un manejador de eventos, etc.
• En el renderizado del lado del servidor o al renderizar Componentes de Servidor, preinitModule solo tiene efecto si lo llamas mientras renderizas un componente o en un contexto asíncrono que se origina a partir del renderizado de un componente. Cualquier otra llamada será ignorada.

Uso

Precarga durante el renderizado

Llama a preinitModule al renderizar un componente si sabes que el componente o sus hijos utilizarán un módulo específico y estás de acuerdo con que el módulo sea evaluado y, por lo tanto, surta efecto inmediatamente después de descargarse.

import { preinitModule } from 'react-dom';

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

Si deseas que el navegador descargue el módulo pero no lo ejecute de inmediato, usa preloadModule en su lugar. Si deseas preinicializar un script que no es un módulo ESM, usa preinit.

Precarga en un manejador de eventos

Llama a preinitModule en un manejador de eventos antes de hacer la transición a una página o estado donde el módulo será necesario. Esto inicia el proceso antes que si lo llamaras durante el renderizado de la nueva página o estado.

import { preinitModule } from 'react-dom';

function CallToAction() {
  const onClick = () => {
    preinitModule("https://example.com/module.js", {as: "script"});
    startWizard();
  }
  return (
    <button onClick={onClick}>Start Wizard</button>
  );
}