vue2笔记 — vue-router路由懒加载的实现


Posted in Javascript onMarch 03, 2017

在Web应用程序中,系统的瓶颈常在于系统的响应速度。如果系统响应速度过慢,用户就会出现埋怨情绪,系统的价值也因此会大打折扣。因此,提高系统响应速度,是非常重要的。

懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用。

用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某个路由后,才去加载对应的组件,这样就会更加高效,实现代码如下:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
 routes: [
  {
   path: '/',
   component: resolve => require(['components/Hello.vue'], resolve)
  },
  {
    path: '/about',
    component: resolve => require(['components/About.vue'], resolve)
  }
 ]
})

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

Javascript 相关文章推荐
JS实现超精简的链接列表在固定区域内滚动效果代码
Nov 04 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
Aug 05 Javascript
jquery 动态增加删除行的简单实例(推荐)
Oct 12 Javascript
Javascript中常用类型的格式化方法小结
Dec 26 Javascript
angular实现商品筛选功能
Feb 01 Javascript
前端MVVM框架解析之双向绑定
Jan 24 Javascript
JavaScript使用math.js进行精确计算操作示例
Jun 19 Javascript
iview Upload组件多个文件上传的示例代码
Sep 30 Javascript
详解Vue.js自定义tipOnce指令用法实例
Dec 19 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
Apr 02 Javascript
微信小程序点击列表跳转到对应详情页过程解析
Sep 26 Javascript
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
求js数组的最大值和最小值的四种方法
Mar 03 #Javascript
jQuery控制元素隐藏和显示
Mar 03 #Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
Mar 03 #Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
Mar 03 #Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 #Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
Mar 03 #Javascript
js实现二级导航功能
Mar 03 #Javascript
You might like
ThinkPHP分页实例
2014/10/15 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
2012/01/15 Javascript
javascript确认框的三种使用方法
2013/12/17 Javascript
解决checkbox的attr(checked)一直为undefined问题
2014/06/16 Javascript
JQuery中两个ul标签的li互相移动实现方法
2015/05/18 Javascript
js完整倒计时代码分享
2016/09/18 Javascript
NodeJs实现定时任务的示例代码
2017/12/05 NodeJs
常用的 JS 排序算法 整理版
2018/04/05 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
微信小程序实现分享商品海报功能
2019/09/30 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
2020/11/02 Javascript
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
Python学习笔记之os模块使用总结
2014/11/03 Python
Python3实现从文件中读取指定行的方法
2015/05/22 Python
Python中定时任务框架APScheduler的快速入门指南
2017/07/06 Python
完美解决Python 2.7不能正常使用pip install的问题
2018/06/12 Python
Python 判断文件或目录是否存在的实例代码
2018/07/19 Python
Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围
2019/06/25 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
Django框架实现在线考试系统的示例代码
2020/11/30 Python
ECCO爱步官方旗舰店:丹麦鞋履品牌
2018/01/02 全球购物
班组长工作职责
2013/12/25 职场文书
演讲比赛获奖感言
2014/02/02 职场文书
《小猫刮胡子》教学反思
2014/02/21 职场文书
公司年会抽奖活动主持词
2014/03/31 职场文书
合作投资意向书
2014/04/01 职场文书
2015年社区关工委工作总结
2015/04/03 职场文书
法定代表人免职证明
2015/06/24 职场文书
企业安全隐患排查治理制度
2015/08/05 职场文书
员工规章制度范本
2015/08/07 职场文书
高一军训口号
2015/12/25 职场文书
《钢铁是怎样炼成的》高中读后感
2019/08/07 职场文书
聊聊golang中多个defer的执行顺序
2021/05/08 Golang