Comment utiliser Vue pour implémenter le chargement asynchrone et le chargement à la demande de composants ?

Dans le développement de Vue, afin d'améliorer les performances de l'application et de réduire la taille de l'application, nous utilisons souvent le chargement asynchrone et le chargement à la demande des composants. Le chargement asynchrone des composants permet à l'application de charger le code des composants uniquement lorsque cela est nécessaire, au lieu de charger tous les codes de composants en même temps, améliorant ainsi la vitesse de chargement et réduisant la taille de l'application. Le chargement à la demande permet aux applications de charger dynamiquement des composants via le routage, réduisant ainsi le temps de premier chargement et d'initialisation de l'application.

Cet article expliquera comment utiliser Vue pour implémenter le chargement asynchrone et le chargement à la demande de composants. Nous verrons comment utiliser les composants asynchrones de Vue et le routage du chargement paresseux pour atteindre ces deux objectifs respectivement.

1. Les composants asynchrones

Les composants asynchrones de Vue chargent le code des composants uniquement lorsque cela est nécessaire, ce qui est un moyen d'obtenir un chargement asynchrone des composants. La façon d'utiliser les composants asynchrones est la suivante :

1 Définir les composants asynchrones

Nous devons d'abord définir un composant asynchrone, et dans la déclaration du composant, utiliser la résolution et require.ensure fonctions pour charger le code du composant.

Vue.component('async-component', function(resolve) {
  require.ensure(['./AsyncComponent.vue'], function() {
    resolve(require('./AsyncComponent.vue'));
  });
});

Dans l'exemple ci-dessus, nous avons défini un composant asynchrone AsyncComponent et utilisé require.ensure pour charger le code du composant. La fonction de résolution est utilisée pour recevoir le code du composant et l'exécuter une fois le code du composant chargé. Notez que la fonction require doit être renvoyée pour que le code du composant soit chargé avec succès.

2. Utiliser des composants asynchrones

Nous pouvons utiliser des composants asynchrones directement dans les modèles Vue.

<template>
  <async-component></async-component>
</template>

Partout où vous avez besoin d'utiliser un composant asynchrone, utilisez simplement le nom du composant directement. Le code du composant est chargé et affiché lorsque le composant est rendu.

2. Le chargement paresseux de routage

Le chargement paresseux de routage Vue consiste à charger dynamiquement le code des composants via la configuration de routage, ce qui est un moyen d'obtenir un chargement de composants à la demande. La façon d'utiliser le chargement différé de routage est la suivante :

1 Définir le chargement différé de routage

Nous devons d'abord définir un itinéraire et utiliser la méthode d'importation dynamique pour charger le code du composant. .

const Foo = () => import('./Foo.vue');
const Bar = () => import('./Bar.vue');

const routes = [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
]

Dans l'exemple ci-dessus, nous avons défini deux composants Foo et Bar et chargé le code du composant via la méthode d'importation dynamique.

2. Utiliser le chargement paresseux de routage

Nous pouvons utiliser le chargement paresseux de routage directement dans la configuration de routage de Vue.

import Vue from 'vue'
import Router from 'vue-router'

const Foo = () => import('./Foo.vue');
const Bar = () => import('./Bar.vue');

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/foo',
      name: 'foo',
      component: Foo
    },
    {
      path: '/bar',
      name: 'bar',
      component: Bar
    }
  ]
})

Dans les itinéraires qui nécessitent un chargement à la demande, utilisez la méthode d'importation dynamique pour charger le code du composant. Lors de l'accès à l'itinéraire, le code du composant sera chargé et affiché.

3. Résumé

Ce qui précède est une méthode pour utiliser Vue pour implémenter le chargement asynchrone et le chargement à la demande de composants. Nous pouvons utiliser différentes méthodes pour optimiser les composants en fonction des besoins réels, améliorer les performances des applications et réduire la taille des applications.

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!