Como carregar recursos sob demanda sem prejudicar interações

Carregar menos no início libera rede, mas uma ação pode atrasar se seu módulo só começar a baixar depois do clique.

Antes de começar

Mapeie rotas e interações primárias e identifique dependências de cada uma.

Passo a passo

1. Separe código por rota ou interação e antecipe dependências após sinais de intenção quando fizer sentido.

2. Teste primeira pintura e a interação real em rede limitada.

Em uma aplicação com bundler ESM, importe um módulo só quando a pessoa abrir o recurso:

botaoAjuda.addEventListener('click', async () => {
  botaoAjuda.disabled = true;
  try {
    const { abrirAjuda } = await import('./ajuda.js');
    abrirAjuda();
  } catch {
    mostrarMensagem('Não foi possível carregar a ajuda. Tente novamente.');
  } finally {
    botaoAjuda.disabled = false;
  }
});

Mantenha estado de carregamento e falha, e não use esse padrão para conteúdo ou controles essenciais que deveriam estar disponíveis antes da ação.

Limites e cuidados

Não sacrifique teclado, feedback ou conteúdo essencial para reduzir o bundle inicial. Compare antes/depois com cache frio e rede representativa; no painel Performance grave a interação e meça o tempo até o feedback/resultado, repita várias vezes e verifique que a falha de rede tem recuperação. O import() precisa ser servido pelo bundler e pelo servidor na rota correta.

Continue na biblioteca

Fonte oficial: Pré-carregar recursos críticos — web.dev.

Conteúdo da biblioteca de Diego Henrich. Confira as fontes citadas e valide orientações que dependem da versão de uma plataforma ou serviço.