Dicas de recursos: modulepreload
Pré-carregue módulos ES para iniciar o JavaScript mais rapidamente.
Dicas de recursos: modulepreload é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 4 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.
Por que existe o pré-carregamento de módulos
Os módulos ES formam um grafo de dependências: um módulo de entrada importa outros, que importam mais módulos. Sem ajuda, cada nível da árvore só é descoberto depois que o nível anterior é analisado — produzindo uma cascata sequencial que prejudica muito o desempenho do carregamento.
O que o pré-carregamento de módulos faz
<link rel="modulepreload" href="/app.js"> informa ao navegador que deve buscar imediatamente o módulo e todos os módulos importados transitivamente, em paralelo. Quando o <script type="module"> é executado, todo o grafo já está no cache.
Em comparação com o pré-carregamento
O pré-carregamento também transfere arquivos em paralelo, mas não entende as instruções de importação — pré-carregar um arquivo de módulo não pré-carrega suas dependências. O pré-carregamento de módulos segue as importações automaticamente, e esse é justamente o seu objetivo.
<link rel="modulepreload" href="/app.js">
<script type="module" src="/app.js"></script>Onde colocá-lo
No <head>, o mais cedo possível. O navegador inicia imediatamente a solicitação de pré-carregamento e continua analisando o HTML. Quando encontra mais tarde no documento o <script type="module"> correspondente, o arquivo já está na memória.
Descoberta e percorrimento do grafo
O navegador analisa o módulo pré-carregado procurando instruções de importação e, em seguida, faz solicitações paralelas para cada endereço importado, de forma recursiva. O usuário paga o custo de uma viagem de ida e volta por nível, mas obtém paralelismo dentro de cada nível, encurtando drasticamente o caminho crítico.
Uso com ferramentas de agrupamento
As ferramentas modernas de agrupamento (Vite, Rollup, Webpack 5+) geram automaticamente elementos de pré-carregamento de módulos para fragmentos divididos do código. Em aplicações montadas manualmente, gere esses elementos a partir do grafo de importações no momento da compilação, para que a lista continue correta à medida que os módulos são adicionados ou removidos.
Considerações sobre CrossOrigin
Para pré-carregamentos de módulos entre origens, inclua crossorigin="anonymous". Isso corresponde ao modo de busca padrão de <script type="module">, garantindo que a cópia pré-carregada seja reutilizada, em vez de ser buscada novamente sem cabeçalhos CORS.
Suporte dos navegadores
O pré-carregamento de módulos é compatível com Chrome, Edge, Safari e versões recentes do Firefox. Em versões antigas do Firefox, ele é ignorado silenciosamente — os módulos continuam funcionando, apenas sem o benefício do pré-carregamento. Não é necessário um preenchimento de compatibilidade; no pior caso, o carregamento será um pouco mais lento em navegadores desatualizados.
Limite o tamanho do grafo
Pré-carregar centenas de módulos desperdiça largura de banda com código que talvez o usuário nunca execute. Pré-carregue apenas os fragmentos de entrada das rotas, não os que são carregados lentamente em níveis profundos. Confie na pré-busca (ou na importação sob demanda) para caminhos de código usados raramente.
Combine com outras dicas
Para imagens e fontes no mesmo head, combine livremente: preconnect para CDNs de terceiros, preload para fontes críticas, pré-carregamento de módulos para módulos de entrada e prefetch para recursos da próxima página. Essas dicas não interferem umas nas outras.
Verificação
Verifique o painel de rede: com o pré-carregamento de módulos, as importações de segundo nível aparecem como solicitações paralelas iniciadas quase simultaneamente à entrada. Sem ele, aparecem de forma escalonada, com cada solicitação começando apenas depois que o módulo pai termina de ser analisado.
Verificação de conhecimento
O que o pré-carregamento de módulos faz que um pré-carregamento comum do mesmo arquivo de módulo não faz?
Resumo
O pré-carregamento de módulos elimina a cascata dos módulos ES ao buscar o módulo de entrada e suas importações em paralelo antes da execução. Coloque-o no início do <head>, gere-o a partir do grafo de compilação, defina crossorigin para módulos entre origens e limite o escopo aos pontos de entrada das rotas para evitar desperdício de largura de banda.
Perguntas Frequentes
A aula “Dicas de recursos: modulepreload” é grátis?
Sim — o texto completo de “Dicas de recursos: modulepreload” é 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 “Dicas de recursos: modulepreload”?
Pré-carregue módulos ES para iniciar o JavaScript mais rapidamente. 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 4 de 4.
Quanto tempo leva a aula “Dicas de recursos: modulepreload”?
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
- Os atributos async e defer
- Preload, Prefetch e Preconnect
- Carregamento tardio de imagens loading=lazy
- Dicas de recursos: modulepreload