Carregamento Preguiçoso e Divisão de Código
Divida os pacotes e carregue componentes e rotas sob demanda.
Carregamento Preguiçoso e Divisão de Código é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 1 de 3. 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 Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 3 aulas no total.
Por que o tamanho do pacote importa
Quando tudo é enviado em um único arquivo grande de JavaScript, os usuários esperam mais tempo para a primeira tela aparecer. A divisão de código separa o aplicativo em blocos menores, carregados somente quando necessário, reduzindo a transferência inicial e acelerando a inicialização.
import() dinâmico
A principal ferramenta é a função dinâmica import(). Ao contrário de uma importação estática no início de um arquivo, ela carrega um módulo sob demanda e retorna uma promessa. Os empacotadores dividem cada importação dinâmica em seu próprio bloco.
const module = await import("./heavyModule.js")
module.doSomething()Divisão de código por rota
O maior ganho vem de dividir o código por rota, para que cada página carregue seu próprio código. No Vue Router, passe uma função que retorne uma importação dinâmica em vez de importar o componente diretamente.
const routes = [
{
path: "/dashboard",
component: () => import("./views/Dashboard.vue")
}
]Rotas estáticas versus sob demanda
Compare os dois estilos. A importação estática inclui o componente no bloco principal; a versão sob demanda cria um bloco separado, buscado somente quando a rota é visitada.
// eager (always loaded)
import Dashboard from "./views/Dashboard.vue"
// lazy (loaded on demand)
const Dashboard = () => import("./views/Dashboard.vue")defineAsyncComponent
Para carregar um componente sob demanda fora do roteador, envolva uma importação dinâmica com defineAsyncComponent. O Vue o carrega somente na primeira vez que ele é renderizado.
import { defineAsyncComponent } from "vue"
const Chart = defineAsyncComponent(() =>
import("./components/HeavyChart.vue")
)Registrando componentes assíncronos
Registre um componente assíncrono como qualquer outro e use-o no modelo. O Vue gerencia o carregamento de forma transparente.
export default {
components: {
HeavyChart: defineAsyncComponent(() =>
import("./components/HeavyChart.vue")
)
}
}Estados de carregamento e erro
A forma avançada de defineAsyncComponent aceita opções para exibir um espaço reservado durante o carregamento e um fallback caso ele falhe.
const Chart = defineAsyncComponent({
loader: () => import("./HeavyChart.vue"),
loadingComponent: Spinner,
errorComponent: LoadError,
delay: 200,
timeout: 5000
})Carregando componentes pesados sob demanda
Boas opções para carregamento sob demanda são partes pesadas ou usadas raramente: gráficos, editores de texto rico, mapas ou diálogos modais que apenas alguns usuários abrem.
const RichEditor = defineAsyncComponent(() =>
import("./components/RichTextEditor.vue")
)
// only downloaded when the editor is actually shownCarregamento condicional com v-if
Combine um componente assíncrono com v-if para que seu bloco seja buscado somente quando o usuário o acionar.
<template>
<button @click="showEditor = true">Edit</button>
<RichEditor v-if="showEditor" />
</template>Blocos nomeados para depuração
Comentários especiais no estilo Webpack dão nomes legíveis aos blocos, facilitando a inspeção da aba de rede e da saída da compilação.
const Reports = () => import(
/* webpackChunkName: "reports" */ "./views/Reports.vue"
)Medindo o impacto
Depois de dividir o código, verifique o resultado da compilação ou a aba de rede do navegador. Você deverá ver vários arquivos de partes menores em vez de um único pacote grande, e o carregamento inicial deverá baixar menos código.
Verificação rápida
Teste seus conhecimentos sobre carregamento sob demanda.
Recapitulação
A divisão de código com import() dinâmico reduz o pacote inicial. Use uma função que retorna import para rotas carregadas sob demanda e defineAsyncComponent para componentes carregados quando necessário, opcionalmente com estados de carregamento e de erro. Carregue sob demanda as partes pesadas ou raramente usadas para manter a inicialização rápida. Em seguida, você aprenderá a armazenar em cache e ignorar trabalho desnecessário com memoização.
Perguntas Frequentes
A aula “Carregamento Preguiçoso e Divisão de Código” é grátis?
Sim — o texto completo de “Carregamento Preguiçoso e Divisão de Código” é 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 Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 3 aulas no total.
O que vou aprender em “Carregamento Preguiçoso e Divisão de Código”?
Divida os pacotes e carregue componentes e rotas sob demanda. Você pratica Vue 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 Vue Academy?
Nenhuma experiência prévia é necessária. Vue 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 3.
Quanto tempo leva a aula “Carregamento Preguiçoso e Divisão de Código”?
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 Vue Academy?
Sim. Cada aula de Vue 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
- Carregamento Preguiçoso e Divisão de Código
- Técnicas de Memoização
- Identificação e Correção de Gargalos