Comment les composants asynchrones permettent-ils le chargement différé ?

Question

Accepted Answer

**Les composants asynchrones** vous permettent de charger le code d'un composant **uniquement quand c'est vraiment nécessaire**, en le divisant dans un paquet séparé (chunk) qui est récupéré à la demande. Cela réduit le JavaScript initial que l'utilisateur télécharge.

## Pourquoi c'est important

Définir un composant asynchrone

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

Le `import()` dynamique indique au bundler (Vite/webpack) de diviser `HeavyChart.vue` dans son propre fichier, chargé paresseusement la première fois que le composant est utilisé — pas en tant que partie du paquet principal.

Pourquoi c'est important pour la performance

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

Les composants volumineux et rarement utilisés (éditeurs de texte riche, graphiques, modaux, panneaux d'administration) n'ont pas besoin de figurer dans le téléchargement initial. Le chargement différé améliore le temps de chargement initial et les Core Web Vitals.

Gérer les états de chargement et d'erreur

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

Cette forme avancée vous permet d'afficher un spinner pendant la récupération et un fallback en cas d'échec — important puisque le chargement différé introduit un délai réseau (généralement bref).

Appairage courant : division de code au niveau des routes

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

Le chargement différé des composants de route est le plus courant et le plus impactant — le code de chaque page se charge uniquement quand l'utilisateur y navigue.

Pourquoi c'est important

Les composants asynchrones sont le mécanisme de Vue pour la **division de code** — la technique clé pour maintenir les paquets initiaux petits à mesure qu'une application grandit.

En chargeant à la demande les composants lourds ou spécifiques à une route (avec une interface de chargement/erreur optionnelle), vous réduisez le JavaScript que les utilisateurs téléchargent au départ, accélérant le chargement initial.

C'est une optimisation de performance standard et à haut impact, surtout quand elle est appliquée aux routes.