Vue按需加载的具体实现


Posted in Javascript onDecember 02, 2017

概念(懒加载)

当打包构建应用时,JavaScript包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,嗯,这样就更加高效了。

场景

xxx项目作为一个单页面应用,采用组件化的开发模式,每次启动首页都会加载全部组件,但此时只是访问了首页而已,就造成了大量组件污染加载的情况。

目的

只在访问当前页面时加载对应组件,避免页面组件全部加载。(按需加载)

实现

app.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</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) 
})

注意:

require()函数接受两个参数。第一个参数是一个数组,表示所依赖的模块,例如['moduleA','moduleB'],第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部使用这些模块。

示例代码中使用了异步的方式加载组件,其中require函数负责异步引入将要渲染的组件,而resolve则负责异步回调渲染组件。

babel-polyfill:对Promise进行转码编译;

npm install --save babel-polyfill

es6-promise-polyfill 解决Promise兼容性问题。关于不太了解Promise的同学请移步这里

npm install --save es6-promise-polyfill

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
什么是JavaScript
Aug 13 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
Jul 05 Javascript
回车直接实现点击某按钮的效果即触发单击事件
Feb 27 Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
Sep 22 Javascript
JavaScript图片轮播代码分享
Jul 31 Javascript
一次$.getJSON不执行的简单记录
Jul 19 Javascript
轻松掌握JavaScript装饰者模式
Aug 27 Javascript
js中string和number类型互转换技巧(分享)
Nov 28 Javascript
Vuex和前端缓存的整合策略详解
May 09 Javascript
JS实现transform实现扇子效果
Jan 17 Javascript
js实现简单抽奖功能
Nov 24 Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 #Javascript
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 #jQuery
如何让你的JS代码更好看易读
Dec 01 #Javascript
javascript中new Array()和var arr=[]用法区别
Dec 01 #Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
Dec 01 #Javascript
利用JS测试目标网站的打开响应速度
Dec 01 #Javascript
Vue-Access-Control 前端用户权限控制解决方案
Dec 01 #Javascript
You might like
曾在DC漫画界反派角色扮演的演员,谁才是你心目中的小丑之王?
2020/04/09 欧美动漫
推荐文章系统(一)
2006/10/09 PHP
PHP操作文件类的函数代码(文件和文件夹创建,复制,移动和删除)
2011/11/10 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
有道JavaScript监听浏览器的问题
2010/06/23 Javascript
五个jQuery图片画廊插件 推荐
2011/05/12 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
2013/04/10 Javascript
document.forms[].submit()使用介绍
2014/02/19 Javascript
jscript读写二进制文件的方法
2015/04/22 Javascript
jquery结婚电子请柬特效源码分享
2015/08/21 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
AngularJS 依赖注入详解和简单实例
2016/07/28 Javascript
AngularJS教程之MVC体系结构详解
2016/08/16 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
2017/07/17 Javascript
基于vue+canvas的excel-like组件实例详解
2017/11/28 Javascript
使用p5.js临摹动态图形
2019/10/23 Javascript
vue+vant 上传图片需要注意的地方
2021/01/03 Vue.js
[14:00]DOTA2国际邀请赛史上最长大战 赛后专访B神
2013/08/10 DOTA
Python的批量远程管理和部署工具Fabric用法实例
2015/01/23 Python
python计算牛顿迭代多项式实例分析
2015/05/07 Python
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
Python对excel文档的操作方法详解
2018/12/10 Python
pycharm激活码快速激活及使用步骤
2020/03/12 Python
三步解决python PermissionError: [WinError 5]拒绝访问的情况
2020/04/22 Python
OpenCV 之按位运算举例解析
2020/06/19 Python
python类共享变量操作
2020/09/03 Python
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
2017/08/18 HTML / CSS
HTML5不支持frameset的两种解决方法
2016/11/14 HTML / CSS
DJI美国:消费类无人机领域的领导者
2018/04/27 全球购物
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
致长跑运动员广播稿
2014/01/31 职场文书
年终考核实施方案
2014/05/26 职场文书
个人师德师风自我剖析材料
2014/09/29 职场文书
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python