Cum permit componentele asincrone încărcarea leneșă?

Question

Accepted Answer

**Componentele asincrone** vă permit să încărcați codul unui component **doar atunci când este cu adevărat necesar**, împărțindu-l într-o grămadă separată (chunk) care este preluată la cerere. Aceasta reduce cantitatea inițială de JavaScript pe care o descarcă utilizatorul.

## Definirea unui component asincron

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

Funcția dinamică `import()` spune bundler-ului (Vite/webpack) să împartă `HeavyChart.vue` în propriul fișier, încărcat leneș prima dată când componenta este folosită — nu ca parte din bundle-ul principal.

## De ce aceasta contează pentru performanță

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

Componentele mari și rar folosite (editoare rich-text, grafice, modale, panouri de administrare) nu trebuie să fie în descărcarea inițială. Încărcarea lor leneșă îmbunătățește timpul de încărcare inițial și Core Web Vitals.

## Tratarea stărilor de încărcare și eroare

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

Această formă avansată vă permite să afișați un spinner în timp ce se preia și o alternativă în caz de eșec — important deoarece încărcarea leneșă introduce o întârziere de rețea (de obicei scurtă).

## Asociere comună: code splitting la nivel de rută

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

Încărcarea leneșă a componentelor de rută este cea mai frecventă și mai impactantă utilizare — codul fiecărei pagini se încarcă doar atunci când utilizatorul se navigează la aceasta.

## De ce aceasta contează

Componentele asincrone sunt mecanismul Vue pentru **code splitting** — tehnica esențială pentru a menține bundle-urile inițiale mici pe măsură ce o aplicație crește.

Prin încărcarea leneșă a componentelor grele sau specifice rutelor la cerere (cu interfață opțională de încărcare/eroare), reduceți JavaScript-ul pe care utilizatorii îl descarcă inițial, accelerând prima încărcare.

Este o optimizare standard, cu impact ridicat, mai ales atunci când este aplicată la rute.