Optimisation du routage Vue Router Lazy-Loading : le secret pour accélérer les performances des pages révélé

Réglage du routage à chargement différé du routeur Vue : le secret pour accélérer les performances des pages révélé

Introduction :
Lors du développement d'applications monopage à l'aide de Vue.js, les performances des pages ont toujours été l'un de nos objectifs. Vue Router, en tant que gestionnaire de routage officiellement recommandé de Vue.js, joue un rôle important dans la navigation dans les pages et le chargement des composants. Afin d'améliorer la vitesse de chargement des pages et l'expérience utilisateur, nous pouvons utiliser la fonction de chargement paresseux (Lazy-Loading) fournie par Vue Router pour optimiser le routage.

Cet article présentera en détail le principe et l'utilisation du chargement paresseux de Vue Router, et le combinera avec des exemples de code spécifiques pour aider les lecteurs à mieux comprendre comment accélérer les performances des pages.

1. Le principe du chargement paresseux

Dans le développement de routage traditionnel, tous les composants de la page seront chargés en même temps au démarrage de l'application, ce qui entraînera un allongement du temps de chargement initial de l'application. Avec le chargement paresseux, le composant correspondant ne sera chargé que lorsque l'utilisateur visitera la page correspondante pour la première fois, améliorant ainsi la vitesse de chargement de la page.

Vue Router utilise la fonction d'importation dynamique fournie par Webpack pour implémenter le chargement paresseux. En passant une fonction qui renvoie une promesse à la fonction d'importation de Webpack, le module correspondant peut être chargé de manière asynchrone en cas de besoin.

2. Comment utiliser le chargement paresseux

Afin d'utiliser la fonction de chargement paresseux, nous devons modifier les propriétés des composants de l'itinéraire pour utiliser l'importation dynamique. Par exemple, nous pouvons changer l'original :

import Home from './views/Home.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  // 其他页面的路由配置
]

en :

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('./views/Home.vue')
  },
  // 其他页面的路由配置
]

De cette façon, lorsque l'utilisateur visite la page d'accueil, le composant Accueil correspondant sera chargé. D'autres pages peuvent également être chargées paresseusement de la même manière.

3. Exemple de code de chargement paresseux

Afin de mieux démontrer l'effet du chargement paresseux, nous utilisons un exemple simple pour démontrer. Supposons que notre application d'une seule page comporte trois pages : Accueil, À propos et Contact.

Tout d'abord, créez le dossier vues dans le répertoire racine du projet et créez trois fichiers de composants Home.vue, About.vue et Contact.vue dans ce dossier.

Ensuite, introduisez Vue Router dans le fichier main.js et ajoutez la configuration de routage correspondante :

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('./views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('./views/About.vue')
  },
  {
    path: '/contact',
    name: 'Contact',
    component: () => import('./views/Contact.vue')
  }
];

const router = new VueRouter({
  routes
});

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

Dans le code ci-dessus, nous modifions les composants de chaque page pour utiliser le chargement paresseux.

4. L'effet du chargement paresseux

Après le démarrage de l'application, si nous ne visitons pas les pages À propos et Contact, les composants de ces deux pages ne seront pas chargés. Le composant ne sera chargé que lorsque nous accéderons à la page correspondante en cliquant sur un lien ou en saisissant manuellement l'adresse.

Une telle méthode de chargement paresseux peut réduire considérablement le temps de chargement initial et améliorer les performances de la page et l'expérience utilisateur.

Conclusion :
En utilisant la fonction de chargement paresseux de Vue Router, nous pouvons implémenter le chargement à la demande dans des applications monopage, améliorant ainsi les performances des pages et l'expérience utilisateur. Cet article présente le principe et l'utilisation spécifique du chargement différé et fournit des exemples de code pour aider les lecteurs à mieux comprendre l'implémentation du chargement différé.

J'espère que cet article pourra être utile aux lecteurs. Le secret pour accélérer les performances des pages a été révélé ! Créons ensemble d'excellentes applications d'une seule page dans le développement de Vue.js.

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!