Note

Frameworks baseados em React frequentemente lidam com o carregamento de recursos para você, então você pode não precisar chamar esta API sozinho. Consulte a documentação de seu framework para obter detalhes.

preload permite que você busque antecipadamente um recurso como uma stylesheet, fonte, ou script externo que você espera usar.

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

Referência

preload(href, options)

Para fazer o pré-carregamento (preload) de um recurso, chame a função preload de react-dom.

import { preload } from 'react-dom';

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

Veja mais exemplos abaixo.

A função preload fornece ao navegador uma dica de que ele deve começar a baixar o recurso fornecido, o que pode economizar tempo.

Parâmetros

  • href: uma string. A URL do recurso que você deseja baixar.
  • options: um objeto. Ele contém as seguintes propriedades:
    • as: uma string obrigatória. O tipo de recurso. Seus valores possíveis são audio, document, embed, fetch, font, image, object, script, style, track, video, worker.
    • crossOrigin: uma string. A política CORS a ser usada. Seus valores possíveis são anonymous e use-credentials. É obrigatório quando as é definido como "fetch".
    • referrerPolicy: uma string. O cabeçalho Referrer a ser enviado durante a busca. Seus valores possíveis são no-referrer-when-downgrade (o padrão), no-referrer, origin, origin-when-cross-origin e unsafe-url.
    • integrity: uma string. Um hash criptográfico do recurso, para verificar sua autenticidade.
    • type: uma string. O tipo MIME do recurso.
    • nonce: uma string. Um nonce criptográfico para permitir o recurso ao usar uma Content Security Policy estrita.
    • fetchPriority: uma string. Sugere uma prioridade relativa para buscar o recurso. Os valores possíveis são auto (o padrão), high e low.
    • imageSrcSet: uma string. Para uso somente com as: "image". Especifica o conjunto de origem da imagem.
    • imageSizes: uma string. Para uso somente com as: "image". Especifica os tamanhos da imagem.

Retorna

preload não retorna nada.

Ressalvas

  • Múltiplas chamadas equivalentes para preload têm o mesmo efeito que uma única chamada. As chamadas para preload são consideradas equivalentes de acordo com as seguintes regras:
    • Duas chamadas são equivalentes se tiverem o mesmo href, exceto:
    • Se as for definido como image, duas chamadas são equivalentes se tiverem o mesmo href, imageSrcSet e imageSizes.
  • No navegador, você pode chamar preload em qualquer situação: ao renderizar um componente, em um Effect, em um manipulador de eventos, e assim por diante.
  • Na renderização do lado do servidor ou ao renderizar componentes do servidor, preload só tem efeito se você o chamar ao renderizar um componente ou em um contexto assíncrono originado da renderização de um componente. Quaisquer outras chamadas serão ignoradas.

Uso

Preloading ao renderizar

Chame preload ao renderizar um componente se souber que ele ou seus filhos usarão um recurso específico.

Exemplos de preloading

Example 1 of 4:
Preloading um script externo 

import { preload } from 'react-dom';

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

Se você deseja que o navegador comece a executar o script imediatamente (em vez de apenas baixá-lo), use preinit em vez disso. Se você deseja carregar um módulo ESM, use preloadModule.

Preloading em um manipulador de eventos

Chame preload em um manipulador de eventos antes de fazer a transição para uma página ou estado onde recursos externos serão necessários. Isso inicia o processo mais cedo do que se você o chamasse durante a renderização da nova página ou 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>
  );
}
PreviouspreinitModule
NextpreloadModule