Routage Lazy-Loading de Vue Router : une tendance pour contribuer à améliorer les performances des pages

Vue Router est le gestionnaire de routage officiel du framework Vue.js. Il permet aux développeurs de changer de contenu de page via le mappage de routage, rendant les applications monopage plus contrôlables et plus faciles à maintenir. Cependant, à mesure que les applications deviennent plus complexes, le chargement et l’analyse des routes peuvent devenir un goulot d’étranglement en termes de performances. Afin de résoudre ce problème, Vue Router fournit une fonction de chargement paresseux des routes, qui diffère le chargement des routes jusqu'à ce qu'il soit réellement nécessaire.

Le chargement différé est une technique de chargement qui retarde le chargement des ressources jusqu'à ce qu'elles soient réellement nécessaires. Pour les grandes applications d'une seule page, le chargement différé peut améliorer considérablement la vitesse et les performances de chargement des pages. En divisant les gros morceaux de code en morceaux plus petits et en les chargeant à la demande en cas de besoin, vous pouvez éviter de charger l'intégralité de l'application en même temps. Ici, nous allons découvrir le routage de chargement paresseux dans Vue Router et fournir quelques exemples de code spécifiques.

Le routage de chargement paresseux dans Vue Router peut être implémenté via la fonction d'importation dynamique. L'importation dynamique est une fonctionnalité d'ES6, qui nous permet d'importer différents modules selon les besoins lors de l'exécution du code. Dans Vue Router, nous pouvons définir le composant correspondant à chaque route comme une fonction, qui renvoie une promesse import(). Lorsque cette promesse est analysée, le composant correspondant sera chargé dynamiquement.

Utilisons un exemple simple pour illustrer l'utilisation du routage de chargement paresseux. Disons que nous avons une page appelée Accueil et une page appelée À propos. Nous pouvons les définir comme des routes de chargement paresseux comme suit :

const Home = () => import('./components/Home.vue');
const About = () => import('./components/About.vue');

Dans le code ci-dessus, Home et About sont toutes deux des fonctions, et elles utilisent la fonction import() pour charger dynamiquement les composants correspondants. Notez que les chemins des composants sont relatifs au module actuel. Maintenant, nous pouvons configurer ces routes de chargement paresseux dans Vue Router :

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
});

Dans le code ci-dessus, nous configurons Home et About sur les chemins racine '/' et '/about' respectivement. Lorsque les utilisateurs accèdent à ces routes, les composants correspondants seront chargés et rendus dynamiquement.

En plus du routage de chargement paresseux de base, Vue Router fournit également une méthode de chargement paresseux plus avancée, à savoir les composants asynchrones. Un composant asynchrone est un composant spécial qui ne s'affiche pas immédiatement lors de son premier chargement, mais qui charge et restitue le composant lorsque cela est nécessaire.

Prenons un exemple pour illustrer l'utilisation de composants asynchrones. Supposons que nous ayons une page appelée Post dont les données doivent être obtenues du serveur via AJAX. Nous pouvons définir Post comme un composant asynchrone, le charger et le restituer si nécessaire.

const Post = () => ({
  component: import('./components/Post.vue'),
  loading: LoadingComponent,
  error: ErrorComponent,
  delay: 200,
  timeout: 3000
});

Dans le code ci-dessus, Post est une fonction qui renvoie un objet de configuration contenant la configuration requise pour le chargement dynamique et le rendu du composant. Parmi eux, l'attribut de composant représente le composant à charger, l'attribut de chargement représente le composant d'espace réservé affiché avant le chargement du composant, l'attribut d'erreur représente le composant affiché lorsque le chargement échoue, l'attribut de retard représente le temps de chargement retardé (millisecondes), et l'attribut timeout représente le délai de chargement (millisecondes).

Lors de la configuration de Post dans Vue Router, nous pouvons l'utiliser directement comme composant asynchrone :

const router = new VueRouter({
  routes: [
    {
      path: '/post/:id',
      component: Post
    }
  ]
});

Dans le code ci-dessus, nous configurons Post sur un chemin '/post/:id' avec des paramètres. Lorsque l'utilisateur accède au chemin, le composant Post sera chargé et rendu dynamiquement.

En résumé, le chargement paresseux des routes de Vue Router peut différer le chargement des routes jusqu'à ce qu'il soit réellement nécessaire. En divisant les gros blocs de code en morceaux plus petits et en les chargeant à la demande en cas de besoin, vous pouvez considérablement améliorer les performances et la vitesse de chargement de vos pages. Dans cet article, nous avons découvert l'utilisation de base du routage paresseux dans Vue Router et avons fourni quelques exemples de code concrets. J'espère que cet article pourra vous aider à comprendre et à utiliser le routage de chargement paresseux !

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!