HTML Academy · Aula

Importação dinâmica import() em módulos

Carregue módulos sob demanda com import() dinâmico.

Importação dinâmica import() em módulos é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.

A expressão import()

Ao contrário da declaração estática de importação, import("./module.js") é uma expressão que retorna uma promessa resolvida para o espaço de nomes do módulo. Ela funciona em qualquer lugar — dentro de funções, condições e até mesmo em scripts que não são módulos.

Divisão de código

A importação dinâmica é o principal mecanismo de divisão de código. Um manipulador de rota pode adiar o carregamento do código da rota até que o usuário navegue até ela: const mod = await import("./routes/admin.js"). Os bytes da rota nunca são baixados antes de serem necessários.

document.getElementById("settings-btn").addEventListener("click", async () => {
  const { renderSettings } = await import("./settings.js");
  renderSettings();
});

Espaço de nomes do módulo retornado

O valor resolvido é o espaço de nomes do módulo — um objeto cujas propriedades são as exportações do módulo. Desestruture as exportações nomeadas diretamente ou acesse a exportação padrão como module.default.

Captura de erros

Como import() retorna uma promessa, os erros de uma busca malsucedida ou de um erro de sintaxe são propagados para .catch(). Envolva as importações dinâmicas em try/catch (em funções assíncronas) ou use .catch() para tratar falhas de rede de forma adequada.

try {
  const mod = await import("./optional.js");
  mod.run();
} catch (e) {
  console.warn("Optional module failed", e);
}

Carregamento condicional

Carregue recursos de compatibilidade somente em navegadores antigos: if (!window.IntersectionObserver) await import("intersection-observer-polyfill"). Os navegadores modernos ignoram completamente esses bytes; os navegadores antigos só pagam esse custo quando necessário.

Resolução de especificadores

O especificador segue as mesmas regras da importação estática: URLs relativas, URLs absolutas ou nomes sem caminho mapeados por um mapa de importações. Strings dinâmicas também funcionam: import(`./locales/${lang}.js`), embora os empacotadores possam ter dificuldade para dividir esse código.

Armazenamento em cache

Cada especificador exclusivo é resolvido para a mesma instância de módulo. A segunda import("./mod.js") retorna o módulo já carregado sem uma nova solicitação de rede — tornando seguro usar a importação dinâmica em manipuladores de eventos sem se preocupar com downloads repetidos.

Importação dinâmica no nível superior

Dentro de um módulo, você pode usar espera no nível superior com importação dinâmica para adiar a execução até que um auxiliar carregado de forma assíncrona esteja disponível. Isso é útil para sistemas de extensões em que a lista de extensões é conhecida em tempo de execução.

// module.js
const { plugin } = await import(`./plugins/${process.env.PLUGIN}.js`);
plugin.init();

Uso com React.lazy e Preact

React.lazy, o `lazy` do Preact proveniente de preact/compat e o defineAsyncComponent do Vue encapsulam a importação dinâmica para realizar a divisão de código no nível do componente. O recurso básico do navegador é import(); os frameworks acrescentam limites de carregamento semelhantes a suspense.

Divisão com Webpack e Vite

Os empacotadores identificam import("...") no código-fonte e geram um bloco separado para o módulo importado. O auxiliar do ambiente de execução busca o bloco na primeira chamada. O autor escreve import() conforme a especificação ES; o empacotador produz a coordenação das solicitações de rede.

Erro comum

Chamar import("X") dentro de um trecho de execução frequente (como dentro de um laço de renderização) verifica o cache novamente a cada chamada. Embora não faça um novo download, essa consulta tem um custo. Armazene o espaço de nomes resolvido em uma variável após a primeira importação.

Verificação de conhecimento

O que import("./mod.js") retorna?

Resumo

A importação dinâmica import() é a equivalente sob demanda da declaração de importação estática. Ela retorna uma promessa resolvida para o espaço de nomes do módulo, permitindo divisão de código, recursos de compatibilidade condicionais e sistemas de extensões. Os módulos ficam em cache após a primeira importação, portanto as chamadas seguintes não geram novos downloads. Os empacotadores geram blocos separados para cada chamada de importação dinâmica.

Perguntas Frequentes

A aula “Importação dinâmica import() em módulos” é grátis?

Sim — o texto completo de “Importação dinâmica import() em módulos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.

O que vou aprender em “Importação dinâmica import() em módulos”?

Carregue módulos sob demanda com import() dinâmico. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar HTML Academy?

Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Importação dinâmica import() em módulos”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de HTML Academy?

Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para HTML Academy