0Pricing
Vue Academy · Leçon

Composants asynchrones avec defineAsyncComponent

defineAsyncComponent(), loadingComponent, errorComponent et options delay et timeout

Composants asynchrones avec defineAsyncComponent est une leçon Vue 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 Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.

Pourquoi utiliser des composants asynchrones

defineAsyncComponent vous permet de charger un composant à la demande : son code est récupéré uniquement lors de son premier affichage.

Cela permet de diviser le code au niveau des routes et des composants, ce qui réduit votre paquet initial et accélère le premier affichage.

La forme avec fonction de chargement

L’utilisation la plus simple consiste à transmettre une fonction de chargement qui renvoie un import() dynamique. Vite/webpack divise automatiquement le code de cet import dans son propre bloc.

<script setup>
import { defineAsyncComponent } from 'vue'

const SettingsModal = defineAsyncComponent(() =>
  import('./SettingsModal.vue')
)
</script>

<template>
  <SettingsModal v-if="showSettings" />
</template>

La forme avec objet d’options

Pour un contrôle plus précis, transmettez un objet d’options. Les principaux champs sont :

  • chargeur — la fonction d’importation dynamique
  • loadingComponent — affiché pendant le chargement
  • errorComponent — affiché en cas d’échec du chargement
  • délai / délai d’expiration — contrôles temporels
import { defineAsyncComponent } from 'vue'
import Loading from './Loading.vue'
import ErrorView from './ErrorView.vue'

const AsyncChart = defineAsyncComponent({
  loader: () => import('./Chart.vue'),
  loadingComponent: Loading,
  errorComponent: ErrorView,
  delay: 200,
  timeout: 5000
})

Délai : éviter l’apparition fugace de l’indicateur

L’option delay (200 ms par défaut) indique combien de temps Vue attend avant d’afficher loadingComponent. Si le bloc se charge plus rapidement que ce délai, aucun indicateur de chargement n’apparaît.

Définissez delay: 0 pour afficher immédiatement l’état de chargement.

const AsyncPanel = defineAsyncComponent({
  loader: () => import('./Panel.vue'),
  loadingComponent: Spinner,
  // wait 300ms before showing Spinner
  delay: 300
})

Délai d’expiration : gérer les chargements lents

L’option timeout définit la durée d’attente maximale. Si le chargeur ne se résout pas dans le délai de timeout ms, errorComponent est affiché et une erreur est consignée.

Par défaut, aucun délai d’expiration n’est défini : le chargement attend indéfiniment.

const AsyncReport = defineAsyncComponent({
  loader: () => import('./Report.vue'),
  errorComponent: ErrorView,
  // fail if not loaded within 10s
  timeout: 10000
})

Le rappel onError

Le gestionnaire onError s’exécute lorsque le chargeur rejette sa promesse. Il reçoit l’erreur, une fonction de nouvelle tentative, une fonction d’abandon et le nombre actuel de tentatives.

C’est ici que vous implémentez une logique de nouvelles tentatives limitées pour les réseaux instables.

const AsyncWidget = defineAsyncComponent({
  loader: () => import('./Widget.vue'),
  onError(error, retry, fail, attempts) {
    if (attempts <= 3) {
      retry()   // try loading again
    } else {
      fail()    // give up, show errorComponent
    }
  }
})

Choisir entre une nouvelle tentative et l’abandon

Dans onError, vous devez appeler exactement l’un de retry() ou fail() (ou aucun des deux, ce qui provoque également un échec). Une stratégie courante consiste à réessayer plusieurs fois en cas d’erreurs réseau, mais à abandonner immédiatement en cas d’erreur de syntaxe ou de bloc, qu’une nouvelle tentative ne pourrait pas résoudre.

onError(error, retry, fail, attempts) {
  const isNetwork = /Loading chunk/.test(error.message)
  if (isNetwork && attempts <= 2) {
    retry()
  } else {
    fail()
  }
}

Associer avec Suspense

Lorsqu’un composant asynchrone se trouve dans une barrière Suspense, c’est la barrière qui contrôle l’état de chargement. Dans ce cas, le propre loadingComponent du composant est ignoré : le contenu de secours de Suspense prend le dessus.

<template>
  <Suspense>
    <AsyncChart />  <!-- loadingComponent ignored here -->
    <template #fallback>Loading chart...</template>
  </Suspense>
</template>

Nommer les blocs pour faciliter le débogage

Vous pouvez nommer le bloc généré à l’aide d’un commentaire spécial. Les requêtes réseau et les rapports de paquets sont ainsi plus faciles à lire.

const AsyncEditor = defineAsyncComponent(() =>
  import(
    /* webpackChunkName: "editor" */
    './RichTextEditor.vue'
  )
)

Composants asynchrones et propriétés

Les composants asynchrones acceptent des propriétés et émettent des événements exactement comme les composants normaux. Vue transmet tout de manière transparente une fois le composant réel résolu : vous ne modifiez pas le point d’utilisation.

<template>
  <AsyncProfile
    :user-id="id"
    @save="handleSave"
  />
</template>

<!-- AsyncProfile resolves to the real component, props/events pass through -->

Bonne pratique : utiliser prudemment le chargement différé au-dessus de la ligne de flottaison

Chargez à la demande les composants hors écran, derrière des interactions (fenêtres modales, onglets) ou rarement utilisés. Évitez ce chargement pour l’interface critique située au-dessus de la ligne de flottaison : l’aller-retour supplémentaire peut nuire aux performances perçues.

// Good candidate: modal only opened on click
const Modal = defineAsyncComponent(() => import('./Modal.vue'))

// Poor candidate: hero shown immediately on load
// import Hero directly instead

Vérification rapide

Testez votre compréhension de defineAsyncComponent.

Récapitulatif

Vous avez appris à charger des composants asynchrones avec defineAsyncComponent :

  • la forme avec chargeur renvoie un import() dynamique pour diviser le code
  • la forme avec options ajoute loadingComponent, errorComponent, delay et timeout
  • delay évite l’apparition fugace de l’indicateur de chargement ; timeout fait échouer les chargements lents
  • onError(error, retry, fail, attempts) implémente la logique de nouvelle tentative ou d’abandon
  • dans Suspense, le contenu de secours de la barrière prend en charge l’interface de chargement

Questions Fréquemment Posées

La leçon « Composants asynchrones avec defineAsyncComponent » est-elle gratuite ?

Oui — le texte complet de « Composants asynchrones avec defineAsyncComponent » 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 Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Composants asynchrones avec defineAsyncComponent » ?

defineAsyncComponent(), loadingComponent, errorComponent et options delay et timeout Tu pratiques Vue 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 Vue Academy ?

Aucune expérience préalable n'est requise. Vue 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 avec defineAsyncComponent » ?

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 Vue Academy ?

Oui. Chaque leçon Vue 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

  1. Composant Vue Suspense
  2. Composants asynchrones avec defineAsyncComponent
  3. SSR en flux avec renderToWebStream
  4. Stratégies d’hydratation différée
← Retour à Vue Academy