Jak komponenty asynchroniczne umożliwiają leniwe ładowanie?

Question

Accepted Answer

**Komponenty asynchroniczne** pozwalają załadować kod komponentu **tylko wtedy, gdy jest faktycznie potrzebny**, dzieląc go na oddzielny pakiet (chunk), który jest pobierany na żądanie. Zmniejsza to ilość kodu JavaScript pobieranego przez użytkownika na początek.

## Definiowanie komponentu asynchronicznego

```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
);
```

Dynamiczny `import()` mówi bundlerowi (Vite/webpack), aby podzielił `HeavyChart.vue` na własny plik, ładowany leniwо przy pierwszym użyciu komponentu — a nie jako część głównego pakietu.

## Dlaczego to ważne

```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
```

Duże, rzadko używane komponenty (edytory tekstu, wykresy, modale, panele administracyjne) nie muszą być w początkowym pobieraniu. Ładowanie ich leniwо poprawia initial load time i Core Web Vitals.

## Obsługa stanów ładowania i błędów

```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
});
```

Ta zaawansowana forma pozwala wyświetlić spinner podczas pobierania i fallback w przypadku błędu — ważne, ponieważ ładowanie leniwe wprowadza (zwykle krótkie) opóźnienie sieciowe.

## Powszechne połączenie: podział kodu na poziomie trasy

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

Łeniwe ładowanie komponentów trasy jest najczęstszym i najbardziej wpływowym zastosowaniem — kod każdej strony ładuje się tylko wtedy, gdy użytkownik do niej nawiguje.

## Dlaczego to ważne

Komponenty asynchroniczne to mechanizm Vue **podziału kodu** — kluczowa technika utrzymywania małych pakietów początkowych w miarę wzrostu aplikacji.

Za pomocą ładowania ciężkich lub specyficznych dla trasy komponentów na żądanie (z opcjonalnym interfejsem ładowania/błędu) zmniejszasz kod JavaScript pobierany przez użytkowników na początek, przyspieszając pierwszy load.

To standardowa, wysokowpływowa optymalizacja wydajności, szczególnie w przypadku zastosowania do tras.