Introduction à la méthode d'implémentation du chargement paresseux des routes avec vue+webpack2

La colonne Tutoriel Vue.js suivante vous présentera la méthode de chargement paresseux du routage avec vue+webpack2. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Lors du packaging et de la création d'une application, le package Javascript peut devenir très volumineux, affectant le chargement des pages. Il serait plus efficace si nous pouvions diviser les composants correspondant aux différentes routes en différents blocs de code, puis charger les composants correspondants lors de l'accès à la route.

Combinez les composants asynchrones de Vue et la fonction de fractionnement de code de Webpack pour implémenter facilement le chargement paresseux des composants de routage.

Premièrement, le composant asynchrone peut être défini comme une fonction d'usine qui renvoie une promesse (la promesse renvoyée par cette fonction devrait résoudre le composant lui-même) :

const Foo = () => Promise.resolve({ /* 组件定义对象 */ })

Deuxièmement, dans Webpack 2, nous peut utiliser la syntaxe d'importation dynamique pour définir des points de partage de code :

import('./Foo.vue') // 返回 Promise

En combinant les deux, voici comment définir un composant asynchrone qui peut être automatiquement divisé en code par Webpack.

const Foo = () => import('./Foo.vue')

Rien ne doit être modifié dans la configuration du routage, utilisez-le simplement comme d'habitude Foo :

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

Recommandations associées :

Résumé 2020 des questions d'entretien Vue frontale (avec réponses)

Recommandation du didacticiel Vue : 2020 dernières sélections de didacticiels vidéo 5 vue.js

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

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!