Maison > Article > interface Web > Implémentation spécifique du chargement à la demande de Vue
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>
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, 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
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
npm install --save es6-promise-polyfill
Recommandations associées :
Étapes pour implémenter le chargement paresseux et l'implémentation inter-domaines à l'aide de Js
Méthode de chargement asynchrone JS
Utilisez Vue pour charger à la demande afin d'améliorer l'expérience utilisateur
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!