Comment utiliser Vue Router pour implémenter le chargement paresseux et le préchargement des routes ?

Comment utiliser Vue Router pour implémenter le chargement et le préchargement paresseux des routes ?

Vue Router est le gestionnaire de routage officiel de Vue.js. Cela peut nous aider à mettre en œuvre la fonction de routage frontal, ce qui est très important pour les applications monopage (SPA). Dans les projets réels, à mesure que les pages augmentent et que les fonctions deviennent plus riches, le chargement paresseux et le préchargement des itinéraires sont des méthodes d'optimisation couramment utilisées. Cet article expliquera comment utiliser Vue Router pour réaliser ces deux fonctions.

1. Chargement paresseux du routage
Dans des circonstances normales, nous devons regrouper tous les composants de la page dans un fichier JavaScript, afin que l'intégralité du code de l'application soit téléchargée lors du premier chargement dans le navigateur. Mais lorsque l’application devient de plus en plus complexe, la taille de ce fichier JavaScript va devenir de plus en plus grande, ce qui entraîne un temps de chargement initial long. Pour résoudre ce problème, vous pouvez utiliser le chargement paresseux des itinéraires.

1. Créer des itinéraires de chargement paresseux
   Lorsque nous utilisons Vue Router pour créer des itinéraires, nous pouvons utiliser la fonctionnalité de composant asynchrone de Vue pour implémenter le chargement paresseux. Par exemple, nous avons un composant de page nommé "Accueil". Vous pouvez définir le routage de chargement différé comme suit :

const Home = () => import('./views/Home.vue')

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

2. Configuration du webpack
   Lorsque vous utilisez le routage de chargement différé, vous devez utiliser la fonction de fractionnement de code de webpack pour séparer les composants asynchrones empaquetés dans un fichier. Dans le fichier de configuration, la configuration suivante est requise :

module.exports = {
  // ...
  output: {
    // ...
    chunkFilename: 'js/[name].[chunkhash].js'
  },
  // ...
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      cacheGroups: {
        vendors: {
          test: /[\/]node_modules[\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
}

Après cette configuration, webpack regroupera automatiquement le composant asynchrone dans un fichier séparé et ajoutera la valeur de hachage appropriée comme nom de fichier pour obtenir un chargement asynchrone.

2. Préchargement du routage (Préchargement)
Dans le chargement paresseux du routage, les composants de la page ne seront chargés que lors de leur accès, et chaque page ne sera chargée qu'une seule fois. Cependant, dans certains scénarios, nous pouvons avoir besoin de charger le code de certains composants de la page lors de l'initialisation de l'application pour améliorer la vitesse de réponse lors des visites ultérieures. Cela nécessite d'utiliser la fonction de préchargement du routage.

1. Configurer le webpack
   Tout d'abord, dans le fichier de configuration du webpack, vous devez utiliser commentaire magique pour spécifier les composants à précharger. Par exemple : magic comment来指定要预加载的组件。例如：

const Home = () => import(/* webpackPreload: true */ './views/Home.vue')

2. 配置路由
   在创建路由时，可以使用webpackChunkName

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

Configurer le routage

Lors de la création d'un itinéraire, vous pouvez utiliser l'option webpackChunkName pour nommer les composants de page préchargés afin de faciliter la différenciation. Par exemple :

rrreee

De cette façon, lorsque l'application est initialisée, Vue Router préchargera automatiquement le composant Home et chargera le code du composant de page à l'avance.

Résumé

En utilisant les fonctions de chargement et de préchargement paresseux de Vue Router, nous pouvons optimiser efficacement les performances des applications frontales.

🎜Dans les projets réels, en fonction du nombre et de la complexité des composants de la page, vous pouvez choisir de manière flexible le chargement différé ou le préchargement pour améliorer la vitesse de chargement et l'expérience utilisateur de l'application. 🎜🎜J'espère que cet article pourra vous aider à comprendre comment utiliser Vue Router pour implémenter le chargement paresseux et le préchargement des routes. Je vous souhaite à tous bonne chance dans vos études ! 🎜

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!