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

Question

IT Interview Practice · 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.

Definirea unui component asincron

De ce aceasta contează pentru performanță

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

Asociere comună: code splitting la nivel de rută

De ce aceasta contează

Întrebări conexe