Carregamento tardio de componentes
Adie a renderização de componentes não essenciais com importações dinâmicas e observadores de interseção.
Carregamento tardio de componentes é uma aula grátis de Sveltejs 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 Sveltejs Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Sveltejs Academy inclui 4 aulas no total.
Por que carregar sob demanda
Adie o carregamento de Componentes pesados ou não essenciais para reduzir o tamanho do pacote inicial.
Importação dinâmica
Use import() para carregar um módulo de forma assíncrona.
let Component;
onMount(async () => {
Component = (await import("./Heavy.svelte")).default;
});Renderizar após o carregamento
Use <svelte:component> para renderizar o Component dinâmico.
{#if Component}
<svelte:component this={Component} />
{/if}Observador de interseção
Combine com IntersectionObserver para carregar quando o espaço reservado entrar na área visível.
Encapsulador de ação
Crie uma ação use:lazy reutilizável para encapsular o padrão.
Estado de carregamento
Mostre um esqueleto ou indicador de carregamento até o Component ser carregado.
Uso abaixo da dobra
Comentários, publicações relacionadas e elementos do rodapé são bons candidatos ao carregamento sob demanda.
Ganhos de desempenho
Reduz o JS inicial e acelera o TTI, especialmente em dispositivos móveis.
Pré-busca
Opcionalmente, pré-carregue módulos ao passar o cursor ou quando estiverem próximos da área visível para tornar as interações mais imediatas.
Evitar divisão excessiva
Para Componentes minúsculos, a sobrecarga da importação dinâmica supera a economia.
Combinar com transmissão progressiva
Para páginas renderizadas no servidor, a transmissão progressiva com hidratação tardia cria primeiras pinturas rápidas.
Verificação rápida
Como você renderiza um Component importado dinamicamente?
Recapitulação
Carregue Componentes pesados sob demanda com importação dinâmica + svelte:component, opcionalmente acionada pela interseção.
Perguntas Frequentes
A aula “Carregamento tardio de componentes” é grátis?
Sim — o texto completo de “Carregamento tardio de componentes” é 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 Sveltejs Academy, atualize para CoddyKit PRO. O curso de Sveltejs Academy inclui 4 aulas no total.
O que vou aprender em “Carregamento tardio de componentes”?
Adie a renderização de componentes não essenciais com importações dinâmicas e observadores de interseção. Você pratica Sveltejs 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 Sveltejs Academy?
Nenhuma experiência prévia é necessária. Sveltejs 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 “Carregamento tardio de componentes”?
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 Sveltejs Academy?
Sim. Cada aula de Sveltejs 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
- Divisão de código e importações dinâmicas
- Otimizando imagens com @sveltejs/enhanced-img
- Carregamento tardio de componentes
- Criação de perfis de aplicações SvelteKit