Frontend Academy · Aula

Módulos ES: import export e importação dinâmica

Use exportações nomeadas, exportações padrão e importações de namespace, e carregue o código sob demanda com import() dinâmico para melhorar o desempenho.

Módulos ES: import export e importação dinâmica é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 1 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 Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

Revisão: fundamentos dos módulos ES

Os módulos ES dão a cada arquivo seu próprio escopo. As exportações nomeadas compartilham valores específicos; as exportações padrão compartilham o valor principal. O empacotador ou o navegador resolve as importações no momento do carregamento.

// Named exports
export const API_BASE = '/api/v1';
export function formatDate(d) { return d.toISOString().slice(0, 10); }

// Default export
export default class ApiClient {
  constructor(base = API_BASE) { this.base = base; }
}

Eliminação de código não utilizado — por que as exportações nomeadas são importantes

Os empacotadores (Rollup, esbuild, Vite) eliminam exportações não utilizadas. Se você importar apenas { formatDate }, o empacotador removerá todo o restante do pacote. As exportações nomeadas permitem a eliminação de código não utilizado; import * as utils pode impedi-la.

// consumers/report.js — only needs formatDate
import { formatDate } from './utils.js';
// Bundler omits API_BASE and ApiClient from this chunk

import() dinâmico — carregamento sob demanda

A import() dinâmica retorna uma Promise. O módulo só é obtido quando o código é executado. Os empacotadores dividem essas importações em partes separadas automaticamente.

// Only load the heavy charting library when needed:
const showChart = async () => {
  const { Chart } = await import('./Chart.js');
  new Chart(canvas, config);
};

btn.addEventListener('click', showChart);

Importação dinâmica com tratamento de erros

Envolva importações dinâmicas em try/catch para tratar falhas de rede ou módulos ausentes de maneira adequada.

try {
  const module = await import('./optional-feature.js');
  module.activate();
} catch (err) {
  console.warn('Optional feature unavailable:', err.message);
}

import.meta

import.meta contém metadados sobre o módulo atual. Propriedades importantes: import.meta.url (URL absoluta), import.meta.env (variáveis de ambiente do Vite) e import.meta.resolve().

// Get the directory of this module:
const dir = new URL('.', import.meta.url).pathname;

// Vite env vars:
const API_URL = import.meta.env.VITE_API_URL;
const isProd = import.meta.env.PROD;

Execução do módulo — uma vez

Os módulos ES são avaliados uma vez, independentemente de quantas vezes sejam importados. Todas as importações do mesmo módulo compartilham a mesma instância. Isso torna os módulos ideais para singletons (armazenamentos e barramentos de eventos).

// store.js — evaluated once
const state = { count: 0 };
export const increment = () => state.count++;
export const getCount = () => state.count;

// Any file that imports from store.js gets the same state instance

Dependências circulares

Dois módulos podem importar um ao outro. O JavaScript lida com isso, mas os valores podem estar indefinidos na primeira utilização devido à ordem de avaliação. Na maioria dos casos, reestruture o código para evitar ciclos.

Importações somente de tipos no TypeScript

Utilize import type { ... } para importar apenas tipos. Essas importações são apagadas no momento da compilação e nunca aparecem no pacote de saída. Utilize-as para evitar dependências circulares causadas por referências que servem apenas para tipos.

import type { User } from './types.js';

function greet(user: User): string {
  return `Hello, ${user.name}`;
}

Reexportação e arquivos agregadores

Um arquivo agregador reexporta elementos de vários módulos, criando um ponto único e conveniente para importações. Tenha cuidado com arquivos agregadores em aplicações grandes — eles podem dificultar a eliminação de código não utilizado.

// components/index.ts
export { Button } from './Button';
export { Input } from './Input';
export type { ButtonProps } from './Button';

// Consumer:
import { Button, Input } from '@/components';

Script type=module no navegador

Adicione type="module" a uma tag de script para habilitar diretamente no navegador a sintaxe de módulos ES — sem um empacotador. Os módulos são adiados por padrão e têm seu próprio escopo.

<script type="module">
  import { greet } from './utils.js';
  greet('World');
</script>

Interoperabilidade entre CommonJS e ESM

O Node.js oferece suporte aos dois formatos. Os arquivos ESM utilizam .mjs ou definem "type": "module" em package.json. Ao consumir pacotes CommonJS a partir de ESM, a exportação padrão é o valor de module.exports. Os empacotadores lidam com isso de forma transparente.

Verificação rápida

Qual é o principal benefício de desempenho de utilizar exportações nomeadas em vez de um único objeto de exportação padrão?

Recapitulação: módulos ES em profundidade

Os módulos são executados uma vez; todos os importadores compartilham a mesma instância. A eliminação de código não utilizado remove exportações nomeadas não utilizadas. A importação dinâmica permite carregamento sob demanda e divisão do código. import.meta fornece o contexto do módulo. Arquivos agregadores são convenientes, mas podem prejudicar a eliminação de código não utilizado. Importações somente de tipos no TypeScript não produzem saída.

Perguntas Frequentes

A aula “Módulos ES: import export e importação dinâmica” é grátis?

Sim — o texto completo de “Módulos ES: import export e importação dinâmica” é 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 Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “Módulos ES: import export e importação dinâmica”?

Use exportações nomeadas, exportações padrão e importações de namespace, e carregue o código sob demanda com import() dinâmico para melhorar o desempenho. Você pratica Frontend 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 Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend 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 1 de 4.

Quanto tempo leva a aula “Módulos ES: import export e importação dinâmica”?

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 Frontend Academy?

Sim. Cada aula de Frontend 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

Módulos ES: import export e importação dinâmica
npm e package.json: dependências scripts
Vite: servidor de desenvolvimento e build
Conceitos de empacotamento: tree shaking e divisão de código

← Voltar para Frontend Academy