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 相关文章推荐
javascript 中对象的继承〔转贴〕
Jan 22 Javascript
不懂JavaScript应该怎样学
Apr 16 Javascript
各种常用浏览器getBoundingClientRect的解析
May 21 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 Javascript
Juery解决tablesorter中文排序和字符范围的方法
May 06 Javascript
CSS3实现动态背景登录框的代码
Jul 28 Javascript
jQuery插件制作的实例教程
May 16 Javascript
AngularJS基础 ng-mouseover 指令简单示例
Aug 02 Javascript
AngularJS实践之使用NgModelController进行数据绑定
Oct 08 Javascript
jQuery UI插件实现百度提词器效果
Nov 21 Javascript
基于Vue.js实现简单搜索框
Mar 26 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
Apr 25 Javascript
求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
十天学会php之第一天
2006/10/09 PHP
PHP判断是否有Get参数的方法
2014/05/05 PHP
PHP中的数组处理函数实例总结
2016/01/09 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
在Z-Blog中运行代码[html][/html](纯JS版)
2007/03/25 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
简单的JavaScript互斥锁分享
2014/02/02 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
Jquery判断form表单数据是否变化
2016/03/30 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
详解Node.js中的事件机制
2016/09/22 Javascript
浅谈vue中.vue文件解析流程
2018/04/24 Javascript
性能优化篇之Webpack构建速度优化的建议
2019/04/03 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
2019/12/17 Javascript
微信小程序去除左上角返回键的实现方法
2020/03/06 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
2020/04/25 Javascript
Openlayers学习之地图比例尺控件
2020/09/28 Javascript
解决antd的Form组件setFieldsValue的警告问题
2020/10/29 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
ES5和ES6中类的区别总结
2020/12/21 Javascript
django model去掉unique_together报错的解决方案
2016/10/18 Python
python实现list元素按关键字相加减的方法示例
2017/06/09 Python
Python如何实现MySQL实例初始化详解
2017/11/06 Python
Python实现E-Mail收集插件实例教程
2019/02/06 Python
Python何时应该使用Lambda函数
2019/07/02 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
python循环嵌套的多种使用方法解析
2019/11/29 Python
tensorflow 自定义损失函数示例代码
2020/02/05 Python
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
哈曼俄罗斯官方网上商店:Harman.club
2020/07/24 全球购物
应届大学生求职的自我评价
2013/11/17 职场文书
2016年会开场白台词
2015/06/01 职场文书
python 如何用terminal输入参数
2021/05/25 Python
总结高并发下Nginx性能如何优化
2021/11/01 Servers
python百行代码实现汉服圈图片爬取
2021/11/23 Python
Windows下载并安装MySQL8.0.x 版本的完整教程
2022/04/10 MySQL