Composants asynchrones et Suspense
Chargez les composants de manière différée avec defineAsyncComponent, encapsulez-les dans et affichez un contenu de repli pendant le chargement du paquet du composant.
Composants asynchrones et Suspense est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Pourquoi utiliser des composants asynchrones ?
Charger à la demande les composants volumineux ou rarement utilisés (par exemple un panneau d'administration ou une bibliothèque de graphiques) permet de conserver un paquet initial réduit. defineAsyncComponent de Vue gère le cycle de vie de l'importation dynamique.
defineAsyncComponent
Transmettez une fonction de chargement qui renvoie une promesse se résolvant vers un composant. Vue gère le chargement, les erreurs et les délais d'expiration.
import { defineAsyncComponent } from 'vue';
const Dashboard = defineAsyncComponent(
() => import('./Dashboard.vue')
);
// Use it like a normal component:
<template>
<Dashboard />
</template>Configurer le comportement asynchrone
Transmettez un objet d'options pour personnaliser l'interface de chargement, l'interface d'erreur, le délai avant le chargement et le délai d'expiration.
const Dashboard = defineAsyncComponent({
loader: () => import('./Dashboard.vue'),
loadingComponent: LoadingSpinner,
errorComponent: ErrorPanel,
delay: 200, // ms before showing loading
timeout: 5000 // ms before showing error
});Découpage des fragments par le générateur de paquets
L'importation dynamique devient un fragment distinct dans le résultat généré. Utilisez les commentaires spéciaux de Vite ou de webpack pour le nommer et le précharger.
const Dashboard = defineAsyncComponent(
() => import(/* webpackChunkName: 'dashboard' */ './Dashboard.vue')
);Chargement différé au niveau des routes
Vue Router prend directement en charge les composants asynchrones dans les définitions de routes.
const routes = [
{ path: '/', component: () => import('./Home.vue') },
{ path: '/dashboard', component: () => import('./Dashboard.vue') },
{ path: '/admin', component: () => import('./Admin.vue') }
];Composant Suspense
Le composant expérimental <Suspense> de Vue affiche un contenu de secours pendant qu'une dépendance asynchrone de son arborescence est en attente.
<template>
<Suspense>
<template #default>
<Dashboard />
</template>
<template #fallback>
<LoadingSpinner />
</template>
</Suspense>
</template>setup() asynchrone
setup() peut être asynchrone : Vue attend sa résolution avant d'effectuer le rendu. Cela fonctionne à l'intérieur de Suspense.
<!-- AsyncPage.vue -->
<script setup>
import { useUserStore } from '@/stores/user';
const userStore = useUserStore();
await userStore.fetchProfile(); // top-level await
</script>
<!-- Parent uses Suspense to handle the await -->Gérer les erreurs avec onErrorCaptured
Utilisez onErrorCaptured dans un parent pour intercepter les erreurs des composants asynchrones ou de setup asynchrone.
import { onErrorCaptured } from 'vue';
onErrorCaptured((err, instance, info) => {
console.error('Caught:', err, info);
return false; // prevent propagation
});Associer Suspense et une limite d'erreur
Entourez l'arborescence d'un composant asynchrone à la fois avec Suspense (pour le chargement) et avec un ancêtre qui intercepte les erreurs (pour les erreurs).
<template>
<ErrorBoundary>
<Suspense>
<template #default><Dashboard /></template>
<template #fallback><Spinner /></template>
</Suspense>
</ErrorBoundary>
</template>Suspense est expérimental
Depuis Vue 3.4, <Suspense> est toujours marqué comme expérimental : son API peut changer. Les composants asynchrones eux-mêmes (defineAsyncComponent) sont stables et prêts pour la production.
Quand utiliser des composants asynchrones
Bonnes possibilités : composants de route, panneaux d'administration ou de paramètres, fenêtres modales ouvertes à la demande, graphiques ou éditeurs volumineux. À éviter pour : les composants minuscules et ceux utilisés sur chaque page (divisez-les autrement).
Vérification rapide
Quelle fonction de Vue 3 transforme une importation dynamique en composant chargé de manière différée ?
Récapitulatif : composants asynchrones et Suspense
defineAsyncComponent encapsule les importations dynamiques pour permettre le chargement différé. Configurez loadingComponent, errorComponent, le délai et le délai d'expiration. Les générateurs de paquets produisent des fragments distincts. Le chargement différé au niveau des routes se fait via component: () => import('...'). <Suspense> affiche un contenu de secours pendant la résolution des dépendances asynchrones (il reste expérimental). setup() asynchrone avec await au niveau supérieur fonctionne dans Suspense. onErrorCaptured intercepte les erreurs asynchrones.
Questions Fréquemment Posées
La leçon « Composants asynchrones et Suspense » est-elle gratuite ?
Oui — le texte complet de « Composants asynchrones et Suspense » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Composants asynchrones et Suspense » ?
Chargez les composants de manière différée avec defineAsyncComponent, encapsulez-les dans et affichez un contenu de repli pendant le chargement du paquet du composant. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Composants asynchrones et Suspense » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- provide() et inject() pour l’injection de dépendances
- Composants asynchrones et Suspense
- Directives personnalisées
- Système de plugins : app.use()