Divisão de código e importações dinâmicas
Divida automaticamente seu pacote por rota e use import() dinâmico para carregar blocos sob demanda.
Divisão de código e importações dinâmicas é uma aula grátis de Sveltejs 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 Sveltejs Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Sveltejs Academy inclui 4 aulas no total.
Divisão automática
SvelteKit divide automaticamente os pacotes por rota. Os visitantes baixam apenas o JS das rotas que visitam.
Importação dinâmica
Para uma divisão mais granular, use import() dinâmico para carregar módulos sob demanda.
const Heavy = (await import("./Heavy.svelte")).default;Carregamento condicional
Carregue uma biblioteca pesada somente quando uma ação específica do usuário exigir isso.
async function openEditor() {
const { default: Editor } = await import("./Editor.svelte");
// ...
}Nomeação de blocos
Vite nomeia os blocos de forma inteligente. Se necessário, você pode indicar nomes usando comentários no estilo de webpackChunkName.
Pré-carregamento
Use data-sveltekit-preload-code para pré-carregar o código da rota ao passar o cursor.
Tamanho do pacote
Pacotes iniciais menores significam carregamentos de página mais rápidos e melhores métricas vitais da Web.
Eliminação de código não utilizado
SvelteKit (por meio de Vite/Rollup) elimina automaticamente as exportações não utilizadas.
Componentes sob demanda
Encapsule importações dinâmicas em Componentes que sejam renderizados depois de carregados.
Armadilhas
Importações dinâmicas adicionam limites assíncronos. Trate os estados de carregamento de forma adequada.
Análise do pacote
Use visualizadores de pacotes para identificar o que deve ser dividido em seguida.
Quando não dividir
Para módulos minúsculos, o custo da divisão é maior do que a economia. Faça uma análise de desempenho para encontrar a granularidade adequada.
Verificação rápida
Como o SvelteKit divide os pacotes por padrão?
Recapitulação
A divisão de código no SvelteKit é automática por rota. Use import() dinâmico para um carregamento sob demanda mais refinado.
Perguntas Frequentes
A aula “Divisão de código e importações dinâmicas” é grátis?
Sim — o texto completo de “Divisão de código e importações dinâmicas” é 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 “Divisão de código e importações dinâmicas”?
Divida automaticamente seu pacote por rota e use import() dinâmico para carregar blocos sob demanda. 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 1 de 4.
Quanto tempo leva a aula “Divisão de código e importações dinâmicas”?
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