Como os componentes assincronos permitem o carregamento lento?

Question

Accepted Answer

**Componentes assincronos** permitem que você carregue o código de um componente **apenas quando for realmente necessário**, dividindo-o em um pacote separado (chunk) que é buscado sob demanda. Isso reduz a quantidade inicial de JavaScript que o usuário baixa.

## Definindo um componente assincronо

```js
import { defineAsyncComponent } from "vue";

// the component's code is only downloaded when it first renders
const HeavyChart = defineAsyncComponent(() =>
  import("./HeavyChart.vue")   // dynamic import → separate chunk
);
```

O `import()` dinâmico diz ao bundler (Vite/webpack) para dividir `HeavyChart.vue` em seu próprio arquivo, carregado com preguiça na primeira vez que o componente é usado — não como parte do pacote principal.

## Por que isso importa

```text
Without lazy loading: main.js = app + HeavyChart + Editor + Modal + ... (huge, slow first load)
With lazy loading:    main.js = app only; HeavyChart.js loads when you open the chart
```

Componentes grandes e raramente usados (editores de texto rico, gráficos, modais, painéis de admin) não precisam estar no download inicial. Carregá-los com preguiça melhora o tempo de carregamento inicial e Core Web Vitals.

## Tratando estados de carregamento e erro

```js
const HeavyChart = defineAsyncComponent({
  loader: () => import("./HeavyChart.vue"),
  loadingComponent: LoadingSpinner,  // shown while the chunk downloads
  errorComponent: ErrorDisplay,       // shown if the download fails
  delay: 200,                         // wait 200ms before showing the spinner
  timeout: 5000,                      // give up after 5s
});
```

Esta forma avançada permite mostrar um spinner durante a busca e um fallback em caso de falha — importante porque o carregamento lento introduz um (geralmente breve) atraso de rede.

## Emparelhamento comum: divisão de código no nível de rota

```js
// Vue Router — each route loads its page component on demand
const routes = [
  { path: "/dashboard", component: () => import("./Dashboard.vue") },
];
```

Carregar componentes de rota com preguiça é o uso mais comum e impactante — o código de cada página é carregado apenas quando o usuário navega para ela.

## Por que isso importa

Componentes assincronos são o mecanismo da Vue para **divisão de código** — a técnica-chave para manter os pacotes iniciais pequenos conforme um aplicativo cresce.

Ao carregar componentes pesados ou específicos de rota sob demanda (com UI de carregamento/erro opcional), você reduz o JavaScript que os usuários baixam no início, acelerando o primeiro carregamento.

É uma otimização de desempenho padrão e de alto impacto, especialmente quando aplicada a rotas.