Explication détaillée de la fonction paresseuse dans Vue3 : application de composants de chargement paresseux pour améliorer les performances de l'application

Explication détaillée de la fonction paresseuse dans Vue3 : application de composants de chargement paresseux pour améliorer les performances de l'application

Dans Vue3, l'utilisation de composants de chargement paresseux peut améliorer considérablement les performances de l'application. Vue3 fournit une fonction paresseuse pour le chargement asynchrone des composants. Dans cet article, nous en apprendrons davantage sur la façon d'utiliser la fonction paresseuse et présenterons quelques scénarios d'application de composants de chargement paresseux.

La fonction paresseuse est l'une des fonctions intégrées dans Vue3. Lors de l'utilisation de la fonction paresseuse, Vue3 ne chargera pas le composant lors du rendu initial, mais le chargera lorsque le composant sera nécessaire. Cela signifie que le code du composant n'est pas téléchargé lors du chargement initial de la page, ce qui améliore la vitesse de chargement et les performances de l'ensemble de l'application.

L'utilisation de la fonction paresseuse est très simple. Introduisez simplement le composant qui doit être chargé paresseusement comme suit :

const MyComponent = () => import('./MyComponent.vue')

Dans le code ci-dessus, nous utilisons la syntaxe de la fonction fléchée d'ES6 pour définir un composant MyComponent et utilisons l'instruction import pour l'importer depuis le même répertoire Effectuez une importation asynchrone dans le fichier MyComponent.vue ci-dessous. De cette façon, le code du composant ne sera téléchargé et compilé que lorsqu'il sera réellement nécessaire.

En plus d'utiliser les fonctions fléchées, nous pouvons également utiliser la syntaxe spéciale fournie par Vue pour définir des composants. Par exemple :

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

Lorsque vous utilisez la fonction définirAsyncComponent pour définir un composant, il suffit de transmettre le chemin du fichier du composant qui doit être chargé de manière asynchrone en tant que paramètre à la fonction d'importation. Vue reconnaîtra automatiquement que l'objet renvoyé par cette fonction est un composant asynchrone et le chargera si nécessaire.

En plus de l'utilisation ci-dessus, nous pouvons également définir des composants asynchrones via la fonction createAsyncComponent :

const MyComponent = createAsyncComponent({
  // 异步加载的组件
  loader: () => import('./MyComponent.vue'),
  // 加载时的占位符
  loadingComponent: Loading,
  // 加载失败时的占位符
  errorComponent: Error,
  // 加载超时时间
  delay: 200,
  // 最大重试次数
  retry: 3
})

Dans le code ci-dessus, nous créons un composant asynchrone via la fonction createAsyncComponent. Cette fonction reçoit un objet en paramètre. L'objet contient d'autres options telles que le chargement asynchrone des composants, les espaces réservés lors du chargement, les espaces réservés en cas d'échec du chargement, le délai d'expiration du chargement, le nombre maximum de tentatives, etc.

L'utilisation de composants de chargement différé peut nous aider à optimiser les performances des pages et l'expérience utilisateur. Voici quelques scénarios d'application courants de composants de chargement différé :

1. Chargement différé d'image

Les images sont l'un des principaux facteurs qui affectent le chargement des pages. vitesse. Afin d'améliorer la vitesse et les performances de chargement des pages, nous pouvons utiliser la technologie de chargement différé des images. Le chargement paresseux des images peut être facilement réalisé à l’aide de composants de chargement paresseux. Ajoutez simplement une balise img au composant et définissez son attribut src sur la directive .lazy :

<img v-lazy="imgUrl">

Dans le code ci-dessus, nous utilisons la directive lazy fournie par Vue3 pour implémenter le chargement paresseux des images. L'attribut src de l'image ne sera pas défini tant qu'il n'apparaîtra pas à l'écran. Les images sont chargées et affichées uniquement lorsque l'utilisateur fait défiler la page.

2. Chargement différé des composants

Lorsqu'une application contient un grand nombre de composants, si chaque composant est entièrement chargé lors du rendu initial, il sera Ce qui entraîne un chargement plus lent de la page. Pour éviter cela, nous pouvons utiliser le chargement paresseux des composants. Un composant est chargé lorsque l'utilisateur en a besoin, améliorant ainsi les performances globales de l'application et la vitesse de chargement. Nous pouvons utiliser la fonction paresseuse introduite ci-dessus pour implémenter le chargement paresseux des composants.

3. Route Lazy Load

Lorsque nous utilisons Vue Router, nous pouvons également utiliser le chargement différé de route pour optimiser davantage les performances de la page. Lorsqu'un utilisateur accède à une route, seuls les composants requis pour cette route sont chargés et rendus. Cela signifie que pour certaines routes, les utilisateurs ne pourront jamais y accéder et leurs composants associés ne seront jamais chargés ni rendus. Cela peut réduire considérablement la charge d’initialisation des applications et améliorer les performances des applications.

En bref, l'utilisation de la fonction paresseuse peut facilement implémenter le chargement paresseux des composants, améliorant ainsi les performances et l'expérience utilisateur de l'application. Nous pouvons l'appliquer dans plusieurs scénarios tels que le chargement paresseux d'images, le chargement paresseux de composants et le chargement paresseux d'itinéraires. J'espère que cet article vous aidera à comprendre les scénarios d'application des fonctions paresseuses et des composants de chargement paresseux dans Vue3 !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!