preloadModule

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

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

Referência

preloadModule(href, options)

Para pré-carregar um módulo ESM, chame a função preloadModule do 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 dado, o que pode economizar tempo.

Parâmetros

• href: uma string. A URL do módulo que você deseja baixar.
• options: um objeto. 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 Política de Segurança de Conteúdo estrita.

Retornos

preloadModule não retorna nada.

Ressalvas

• Chamadas múltiplas 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: durante a renderização de um componente, em um Efeito, em um manipulador de eventos, e assim por diante.
• Na renderização do lado do servidor ou ao renderizar Componentes do Servidor, preloadModule só tem efeito se você chamá-lo enquanto renderiza um componente ou em um contexto assíncrono originado da renderização de um componente. Quaisquer outras chamadas serão ignoradas.

Uso

Pré-carregando 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é-carregando em um manipulador de eventos

Chame preloadModule em um manipulador de eventos antes de transitar para uma página ou estado onde o módulo será necessário. Isso inicia o processo mais cedo do que se você chamá-lo 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}>Iniciar Assistente</button>
  );
}