preloadModule

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

• Referência
  • preloadModule(href, options)
• Uso
  • Pré-carregamento ao renderizar
  • Pré-carregamento em um manipulador de eventos

Referência

preloadModule(href, options)

Para pré-carregar um módulo ESM, chame a função preloadModule de react-dom.

import { preloadModule } from 'react-dom';

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

Veja mais exemplos abaixo.

A função preloadModule fornece ao navegador uma dica de que ele deve começar a baixar o módulo especificado, o que pode economizar tempo.

Parâmetros

• href: uma string. A URL do módulo que você deseja baixar.
• options: um objeto. Ele contém as seguintes propriedades:
  • as: uma string obrigatória. Deve ser 'script'.
  • crossOrigin: uma string. A política CORS a ser usada. Seus valores possíveis são anonymous e use-credentials.
  • integrity: uma string. Um hash criptográfico do módulo, para verificar sua autenticidade.
  • nonce: uma string. Um nonce criptográfico para permitir o módulo ao usar uma Content Security Policy estrita.

Retorna

preloadModule não retorna nada.

Ressalvas

• Múltiplas chamadas para preloadModule com o mesmo href têm o mesmo efeito que uma única chamada.
• No navegador, você pode chamar preloadModule 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 Server Components, preloadModule 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

Pré-carregamento ao renderizar

Chame preloadModule ao renderizar um componente se você souber que ele ou seus filhos usarão um módulo específico.

import { preloadModule } from 'react-dom';

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

Se você quiser que o navegador comece a executar o módulo imediatamente (em vez de apenas baixá-lo), use preinitModule em vez disso. Se você quiser carregar um script que não seja um módulo ESM, use preload.

Pré-carregamento em um manipulador de eventos

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