Comment implémenter le chargement à la demande dans Vue

Cet article présente principalement l'implémentation spécifique du chargement à la demande de Vue. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil

Concept (chargement paresseux)

Lors de l'empaquetage et de la construction d'une application, le package JavaScript deviendra très volumineux, affectant le chargement des pages. Si nous pouvons diviser les composants correspondant à différentes routes en différents blocs de code, puis charger les composants correspondants lors de l'accès à la route, eh bien, ce sera plus efficace.

Scénario

En tant qu'application monopage, le projet xxx adopte un modèle de développement basé sur les composants. Chaque fois que la page d'accueil est démarrée, tous les composants seront chargés, mais à ce moment-là, seule la page d'accueil est visitée. Voilà, ce qui entraîne un grand nombre de composants contaminant la situation de chargement.

Objectif

Chargez uniquement le composant correspondant lors de l'accès à la page actuelle pour éviter de charger tous les composants de la page. (Chargement à la demande)

Implémentation

app.vue

<template>
  <p id="app">
    <router-view/>
  </p>
</template>

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import 'babel-polyfill'
import {Promise} from 'es6-promise-polyfill'
import App from '../components/app'

// 定义路由，每个路由映射一个组件。
const Routers = [
  {
    path: '/',  // 路径
    component: resolve => require(['../components/member/index], resolve)  // 异步加载组件
  },
  {
    path: '/login',
    component: resolve => require(['../components/member/login'], resolve)
  }
]

const RouterConfig = {
  routes: Routers
}
// 创建router实例，并传递路由配置。
const router = new VueRouter(RouterConfig);
// 创建并挂载根实例。
new Vue({
  el:'#app',
  router,
  // 将h作为createElement的别名是一个通用惯例。
  render: h =>(App) 
})

Remarque : la fonction

require() accepte deux paramètres. Le premier paramètre est un tableau, indiquant les modules dépendants, tels que ['moduleA', 'moduleB']. Le deuxième paramètre est une fonction de rappel, qui sera appelée lorsque tous les modules précédemment spécifiés seront chargés avec succès. Les modules chargés sont passés en paramètres à cette fonction, ce qui leur permet d'être utilisés dans la fonction de rappel.

L'exemple de code utilise une méthode asynchrone pour charger les composants. La fonction require est responsable de l'introduction de manière asynchrone du composant à restituer, et la résolution est responsable du rendu de rappel asynchrone du composant.

babel-polyfill : transcoder et compiler Promise

npm install --save babel-polyfill

es6-promise-polyfill résout les problèmes de compatibilité de Promise ; Pour les étudiants qui ne connaissent pas grand-chose à Promise, veuillez aller ici

npm install --save es6-promise-polyfill

Ce qui précède est ce que j'ai compilé pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

À propos de la limitation des fonctions et de l'anti-shake de la fonction dans JS (tutoriel détaillé)

Comment utiliser vue dans vue Componentisation d'en-tête commun de page (tutoriel détaillé)

À quoi devez-vous faire attention lorsque vous utilisez React.setState ?

Comment l'introduire dans vue Interface SDK WeChat

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!