preloadModule

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

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

Referencia

preloadModule(href, options)

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

import { preloadModule } from 'react-dom';

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

Ver más ejemplos abajo.

La función preloadModule proporciona al navegador una señal de que debería comenzar a descargar el módulo dado, lo cual puede ahorrar tiempo.

Parámetros

• href: un string. La URL del módulo que deseas descargar.
• 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

preloadModule no devuelve nada.

Advertencias

• Múltiples llamadas a preloadModule con el mismo href tienen el mismo efecto que una sola llamada.
• En el navegador, puedes llamar a preloadModule 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, preloadModule 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 preloadModule al renderizar un componente si sabes que el componente o sus hijos utilizarán un módulo específico.

import { preloadModule } from 'react-dom';

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

Si deseas que el navegador comience a ejecutar el módulo de inmediato (en lugar de solo descargarlo), usa preinitModule en su lugar. Si deseas cargar un script que no es un módulo ESM, usa preload.

Precarga en un manejador de eventos

Llama a preloadModule 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 { preloadModule } from 'react-dom';

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