Que signifie le chargement paresseux du routage vue ?

Le chargement différé de Vue Routing consiste à charger le code d'un composant de routage uniquement lorsqu'il doit être utilisé, afin de réduire le temps de chargement initial et d'améliorer les performances de l'application. Le principe de mise en œuvre est de charger dynamiquement le code d'un composant de routage lorsque ce composant doit être utilisé. Plus précisément, lorsque l'utilisateur accède à une route, Vue Router vérifiera si le composant de la route a été chargé. Sinon, il utilisera la fonction d'importation dynamique de Webpack pour charger de manière asynchrone le code du composant. Lorsque vous utilisez le chargement paresseux, vous devez vous assurer que le nom du composant asynchrone est unique.

Le système d'exploitation de ce tutoriel : système Windows 10, ordinateur DELL G3.

Le chargement paresseux de Vue Router (chargement paresseux de Vue Router) fait référence au chargement du code d'un composant de routage uniquement lorsque le composant doit être utilisé, afin de réduire le temps de chargement initial et d'améliorer les performances de l'application. Dans une application Vue.js, si la configuration de routage et les composants sont inclus dans le fichier de packaging de l'application, cela entraînera une augmentation du temps de chargement initial, en particulier lorsque l'application comporte de nombreuses routes et composants. Pour résoudre ce problème, Vue.js fournit un mécanisme de chargement paresseux de routage.

Le principe d'implémentation du chargement paresseux du routage Vue est de charger dynamiquement le code d'un composant de routage lorsque le composant doit être utilisé. Plus précisément, lorsque l'utilisateur accède à une route, Vue Router vérifiera si le composant de la route a été chargé. Sinon, il utilisera la fonction d'importation dynamique de Webpack pour charger de manière asynchrone le code du composant. De cette façon, le code du composant correspondant est chargé uniquement lorsque l'utilisateur a réellement besoin d'accéder à l'itinéraire, réduisant ainsi le temps de chargement initial.

Pour implémenter le chargement paresseux du routage Vue, vous devez utiliser la fonction de composant asynchrone de Vue Router. Un composant asynchrone est une fonction d'usine qui renvoie un objet Promise qui doit résoudre un composant. Dans Vue Router, les composants asynchrones peuvent être spécifiés en utilisant l'attribut composant dans la configuration de la route. Par exemple :

const routes = [{path: '/user',component: () => import(/* webpackChunkName: "user" */ './UserComponent.vue')}]

Dans cet exemple, Vue Router charge le composant UserComponent.vue de manière asynchrone lorsque l'utilisateur accède à la route /user. Webpack regroupera le composant dans un morceau de code indépendant (morceau) et utilisera webpackChunkName dans le commentaire pour spécifier le nom du morceau de code. De cette façon, lorsque le composant doit être chargé, Webpack peut rapidement trouver et charger le bloc de code correspondant.

En plus d'utiliser la fonction d'importation dynamique de Webpack pour implémenter le chargement paresseux des itinéraires, vous pouvez également utiliser la fonction de garde de navigation de Vue Router pour y parvenir. Les gardes de navigation sont des segments de code qui sont exécutés avant et après le déclenchement de la navigation. Les composants peuvent être chargés dynamiquement dans les gardes de navigation selon les besoins. Par exemple :

router.beforeEach((to, from, next) => {const isIE = navigator.userAgent.indexOf('MSIE') !== -1;if (isIE) {// 如果使用ie浏览器，则不进行懒加载  next(false);} else {// 否则进行懒加载  next();}})

Dans cet exemple, la fonction de garde de navigation beforeEach de Vue Router est utilisée. Exécutez cette fonction avant le déclenchement de la navigation et les composants peuvent être chargés dynamiquement selon les besoins. Par exemple, il est déterminé ici si l'utilisateur utilise le navigateur IE. Si tel est le cas, le chargement paresseux ne sera pas effectué ; Il convient de noter que lors de l'utilisation des gardes de navigation, la fonction suivante doit être utilisée pour mettre fin à la fonction de rappel. Si la fonction suivante n'est pas appelée, la navigation sera annulée.

En bref, le chargement paresseux du routage Vue est une technique d'optimisation des performances très utile, qui peut réduire au minimum le temps de chargement initial de l'application et améliorer les performances et la vitesse de réponse de l'application. Lors de l'implémentation du chargement paresseux des routes Vue, vous pouvez utiliser la fonction d'importation dynamique de Webpack ou la fonction de garde de navigation de Vue Router. Il convient de noter que lors de l'utilisation du chargement différé, vous devez vous assurer que le nom du composant asynchrone est unique pour éviter les problèmes.

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!