Implémentation spécifique du chargement à la demande de Vue-js tutoriel-php.cn

Implémentation spécifique du chargement à la demande de Vue

小云云

Libérer： 2018-05-14 11:34:30

original

2448 Les gens l'ont consulté

Lors du packaging et de la création d'une application, le package JavaScript peut devenir 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. Cet article présente principalement l'implémentation spécifique du chargement à la demande de Vue, dans l'espoir d'aider tout le monde.

Scénario

En tant qu'application monopage, le projet xxx adopte un modèle de développement basé sur des composants Chaque fois que vous démarrez la page d'accueil, tous les composants seront chargés, mais à ce moment-là, la simple visite de la page d'accueil provoquait la contamination d'un grand nombre de composants lors du 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>

Copier après la connexion

router.js

import Vue from &#39;vue&#39;
import VueRouter from &#39;vue-router&#39;
import &#39;babel-polyfill&#39;
import {Promise} from &#39;es6-promise-polyfill&#39;
import App from &#39;../components/app&#39;

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

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

Copier après la connexion

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, tandis que la résolution est responsable du rendu de rappel asynchrone du composant.

babel-polyfill : transcodez et compilez Promise

npm install --save babel-polyfill

Copier après la connexion

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