Come i componenti asincroni abilitano il lazy loading?

Question

Accepted Answer

**I componenti asincroni** ti permettono di caricare il codice di un componente **solo quando è effettivamente necessario**, suddividendolo in un bundle separato (chunk) che viene recuperato su richiesta. Questo riduce il JavaScript iniziale che l'utente scarica.

## Definire un componente asincrono

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

L'`import()` dinamico dice al bundler (Vite/webpack) di suddividere `HeavyChart.vue` nel suo file, caricato pigrizia la prima volta che il componente viene utilizzato — non come parte del bundle principale.

## Perché è importante

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

I componenti grandi e raramente utilizzati (editor di rich-text, grafici, modal, pannelli admin) non devono far parte del download iniziale. Il lazy-loading di questi componenti migliora il tempo di caricamento iniziale e Core Web Vitals.

## Gestire gli stati di caricamento e errore

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

Questa forma avanzata ti permette di mostrare uno spinner durante il fetch e un fallback in caso di errore — importante poiché il lazy-loading introduce un ritardo di rete (solitamente breve).

## Accoppiamento comune: code splitting a livello di route

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

Il lazy-loading dei componenti route è l'uso più comune e impattante — il codice di ogni pagina viene caricato solo quando l'utente naviga verso di essa.

## Perché è importante

I componenti asincroni sono il meccanismo di Vue per il **code splitting** — la tecnica chiave per mantenere i bundle iniziali piccoli man mano che un'app cresce.

Caricando componenti pesanti o specifici di una route su richiesta (con UI opzionali di caricamento/errore), riduci il JavaScript che gli utenti scaricano all'inizio, accelerando il caricamento iniziale.

È un'ottimizzazione delle prestazioni standard e ad alto impatto, specialmente quando applicata alle route.