Nota

Los frameworks basados en React frecuentemente manejan la carga de recursos por ti, por lo que es posible que no necesites llamar a esta API tú mismo. Consulta la documentación de tu framework para más detalles.

preload te permite obtener anticipadamente un recurso como una hoja de estilos, fuente o script externo que esperas utilizar.

preload("https://example.com/font.woff2", {as: "font"});

Referencia

preload(href, options)

Para precargar un recurso, llama a la función preload de react-dom.

import { preload } from 'react-dom';

function AppRoot() {
  preload("https://example.com/font.woff2", {as: "font"});
  // ...
}

Ver más ejemplos a continuación.

La función preload proporciona al navegador una sugerencia de que debería comenzar a descargar el recurso dado, lo cual puede ahorrar tiempo.

Parámetros

  • href: una cadena. La URL del recurso que deseas descargar.
  • options: un objeto. Contiene las siguientes propiedades:
    • as: una cadena requerida. El tipo de recurso. Sus valores posibles son audio, document, embed, fetch, font, image, object, script, style, track, video, worker.
    • crossOrigin: una cadena. La política CORS a utilizar. Sus valores posibles son anonymous y use-credentials. Es requerida cuando as está configurado como "fetch".
    • referrerPolicy: una cadena. El header Referrer a enviar al obtener el recurso. Sus valores posibles son no-referrer-when-downgrade (el predeterminado), no-referrer, origin, origin-when-cross-origin y unsafe-url.
    • integrity: una cadena. Un hash criptográfico del recurso, para verificar su autenticidad.
    • type: una cadena. El tipo MIME del recurso.
    • nonce: una cadena. Un nonce criptográfico para permitir el recurso al usar una Política de Seguridad de Contenido estricta.
    • fetchPriority: una cadena. Sugiere una prioridad relativa para obtener el recurso. Los valores posibles son auto (el predeterminado), high y low.
    • imageSrcSet: una cadena. Para uso exclusivo con as: "image". Especifica el conjunto de fuentes de la imagen.
    • imageSizes: una cadena. Para uso exclusivo con as: "image". Especifica los tamaños de la imagen.

Devuelve

preload no devuelve nada.

Advertencias

  • Múltiples llamadas equivalentes a preload tienen el mismo efecto que una sola llamada. Las llamadas a preload se consideran equivalentes según las siguientes reglas:
    • Dos llamadas son equivalentes si tienen el mismo href, excepto:
    • Si as está configurado como image, dos llamadas son equivalentes si tienen el mismo href, imageSrcSet e imageSizes.
  • En el navegador, puedes llamar a preload en cualquier situación: mientras renderizas un componente, en un Efecto, en un controlador de eventos, y así sucesivamente.
  • En el renderizado del lado del servidor o al renderizar Componentes de Servidor, preload solo tiene efecto si lo llamas mientras renderizas un componente o en un contexto asíncrono que se origina al renderizar un componente. Cualquier otra llamada será ignorada.

Uso

Precarga al renderizar

Llama a preload al renderizar un componente si sabes que él o sus hijos usarán un recurso específico.

Ejemplos de precarga

Ejemplo 1 de 4:
Precargar un script externo 

import { preload } from 'react-dom';

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

Si quieres que el navegador comience a ejecutar el script inmediatamente (en lugar de solo descargarlo), usa preinit en su lugar. Si quieres cargar un módulo ESM, usa preloadModule.

Precarga en un controlador de eventos

Llama a preload en un controlador de eventos antes de hacer la transición a una página o estado donde se necesitarán recursos externos. Esto inicia el proceso antes que si lo llamas durante el renderizado de la nueva página o estado.

import { preload } from 'react-dom';

function CallToAction() {
  const onClick = () => {
    preload("https://example.com/wizardStyles.css", {as: "style"});
    startWizard();
  }
  return (
    <button onClick={onClick}>Start Wizard</button>
  );
}
AnteriorpreinitModule
SiguientepreloadModule