Comment implémenter le chargement paresseux des routes dans le développement de la technologie Vue

Comment implémenter le chargement paresseux des routes dans le développement de la technologie Vue

Dans le développement de Vue, le chargement paresseux des routes est une technologie importante pour améliorer les performances des applications et l'expérience utilisateur. Grâce au chargement paresseux des itinéraires, nous pouvons charger chaque composant de routage de l'application à la demande, réduisant ainsi le temps de chargement initial et améliorant la vitesse de réponse de l'application. Dans cet article, nous présenterons en détail comment implémenter le chargement paresseux des routes dans Vue et donnerons des exemples de code spécifiques.

1. Qu'est-ce que le chargement paresseux de routage ?

Le chargement paresseux de routage fait référence à une technologie qui charge des composants de routage à la demande dans les projets Vue. Dans le développement traditionnel, tous les composants sont chargés en même temps. Lorsque la taille de l'application augmente, le temps de chargement initial augmente considérablement, affectant l'expérience utilisateur de l'application. Le chargement paresseux des itinéraires peut diviser les composants en fonction des exigences de routage et les charger uniquement en cas de besoin.

2. Comment implémenter le chargement paresseux des routes

Ce qui suit est une méthode spécifique étape par étape pour implémenter le chargement paresseux des routes :

1. Installez le plug-in babel

Avant d'utiliser le chargement paresseux des routes, nous devons installer le plug-in babel @babel /plugin-syntax-dynamic-import. Vous pouvez l'installer via la commande suivante : @babel/plugin-syntax-dynamic-import。可以通过以下命令进行安装：

npm install --save-dev @babel/plugin-syntax-dynamic-import

2. 修改配置文件

找到项目根目录下的babel.config.js文件，将@babel/preset-env配置中的modules改为false，并添加插件@babel/plugin-syntax-dynamic-import，配置如下：

module.exports = {
  presets: [
    '@babel/preset-env'
  ],
  plugins: [
    '@babel/plugin-syntax-dynamic-import'
  ]
}

3. 修改路由配置

在Vue的路由配置文件（一般是router/index.js）中，将原始的组件引入方式修改为懒加载的方式。下面是一个示例：

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

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

在上面的代码中，component属性的值改为箭头函数，并使用import(/* webpackChunkName: "name" */ '../path/to/component.vue')的语法来进行组件的按需加载。其中，name和path/to/component.vue是组件的名称和相对于router/index.jsrrreee

Modifiez le fichier de configuration
4. Trouvez le fichier babel.config.js dans le répertoire racine du projet et modifiez @babel Remplacez modules dans la configuration /preset-env par false et ajoutez le plug-in @babel/plugin-syntax-dynamic -import , la configuration est la suivante :
rrreee

Modifier la configuration de routage

Introduire le composant d'origine dans le fichier de configuration de routage de Vue (généralement router/index.js ) La méthode est modifiée en chargement différé. Voici un exemple :

rrreee

Dans le code ci-dessus, changez la valeur de l'attribut component en fonction de flèche et utilisez import(/* webpackChunkName: "name" */ '.. /path/to/component.vue') syntaxe pour charger les composants à la demande. Parmi eux, name et path/to/component.vue sont le nom du composant et le chemin relatif à router/index.js.
🎜Reconstruire le projet🎜🎜🎜Après avoir terminé les étapes ci-dessus, reconstruisez le projet. Vous pouvez voir que dans les outils de développement du navigateur, chaque composant de routage générera un fichier indépendant, qui ne sera chargé qu'en cas de besoin. 🎜🎜À ce stade, nous avons implémenté avec succès le chargement paresseux des routes dans Vue. 🎜🎜Résumé🎜🎜Le chargement paresseux des routes est une technologie importante dans le développement de Vue. En chargeant des composants de routage à la demande, les performances et l'expérience utilisateur de l'application peuvent être considérablement améliorées. Cet article détaille les étapes d'implémentation du chargement différé des routes et donne des exemples de code spécifiques. J'espère que cet article vous aidera à comprendre et à utiliser le chargement paresseux du routage. 🎜

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!