Fonction defineAsyncComponent() de Vue3

Vue3 全局 APIVue3 API globale

defineAsyncComponent()C'est une fonction introduite dans Vue 3 pour charger des composants de manière asynchrone. Elle vous permet de charger un composant uniquement lorsque cela est nécessaire, plutôt que de charger tous les composants en même temps au démarrage de l'application. C'est très utile pour optimiser les performances des grandes applications et réduire le temps de chargement initial.

Pourquoi utiliser defineAsyncComponent() ?

Lors du développement d'applications volumineuses, si tous les composants sont chargés au démarrage de l'application, le temps de chargement initial peut être trop long, ce qui nuit à l'expérience utilisateur. En utilisantdefineAsyncComponent(), vous pouvez retarder le chargement de certains composants. Ce n'est que lorsque les utilisateurs visitent la page ou la fonctionnalité concernée que ces composants sont chargés, ce qui améliore les performances de l'application.

Comment utiliser defineAsyncComponent() ?

Utilisation de base

Pour utiliserdefineAsyncComponent(), vous devez l'importer depuis Vue et le passer au composant qui doit être chargé de manière asynchrone. Voici un exemple simple :

Exemple

import { defineAsyncComponent } from 'vue';

const AsyncComponent = defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
);

export default {
  components: {
    AsyncComponent
  }
};

Dans cet exemple,MyComponent.vuele composant sera chargé de manière asynchrone lorsque nécessaire.

Gestion des états de chargement

defineAsyncComponent()Il vous permet également de définir des états de chargement, tels que le chargement, l'échec de chargement, etc. Vous pouvez configurer ces états en passant un objet :

Exemple

const AsyncComponent = defineAsyncComponent({
  loader: () => import('./components/MyComponent.vue'),
  loadingComponent: LoadingComponent, // Composant affiché pendant le chargement
  errorComponent: ErrorComponent, // Composant affiché lorsque le chargement échoue
  delay: 200, // Délai avant l'affichage du composant de chargement (ms)
  timeout: 3000 // Délai d'attente du chargement (ms)
});

Dans cette configuration,LoadingComponentsera affiché pendant le chargement du composant,ErrorComponentsera affiché lorsque le chargement échoue.

Gestion des erreurs

Si le composant ne parvient pas à se charger,defineAsyncComponent()fournit uneonErrorfonction de rappel pour gérer les erreurs :

Exemple

const AsyncComponent = defineAsyncComponent({
  loader: () => import('./components/MyComponent.vue'),
  onError(error, retry, fail, attempts) {
    if (error.message.includes('Failed to fetch dynamically imported module')) {
      retry(); // Réessayer le chargement
    } else {
      fail(); // Abandonner le chargement
    }
  }
});

Dans cet exemple, si le chargement échoue, vous pouvez choisir de réessayer le chargement ou d'abandonner le chargement.

Cas d'utilisation pratiques

Chargement des routes à la demande

Dans Vue Router, vous pouvez utiliserdefineAsyncComponent()pour charger les composants de route à la demande :

Exemple

import { defineAsyncComponent } from 'vue';

const routes = [
  {
    path: '/about',
    component: defineAsyncComponent(() => import('./views/AboutView.vue'))
  }
];

De cette façon,AboutView.vuele composant ne sera chargé que lorsque l'utilisateur visite/aboutla route.

Chargement différé des composants volumineux

Pour certains composants volumineux, vous pouvez utiliserdefineAsyncComponent()pour les charger de manière différée, réduisant le temps de chargement initial :

Exemple

const LargeComponent = defineAsyncComponent(() =>
  import('./components/LargeComponent.vue')
);

Vue3 全局 APIVue3 API globale

Autres extensions