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 相关文章推荐
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
Apr 01 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
JavaScript 实现鼠标拖动元素实例代码
Feb 24 Javascript
JS小游戏之极速快跑源码详解
Sep 25 Javascript
浅谈javascript中基本包装类型
Jun 03 Javascript
介绍一个简单的JavaScript类框架
Jun 24 Javascript
jQuery给指定的table动态添加删除行的操作方法
Oct 12 Javascript
Sortable.js拖拽排序使用方法解析
Nov 04 Javascript
详解Angular.js指令中scope类型的几种特殊情况
Feb 21 Javascript
微信小程序商城项目之淘宝分类入口(2)
Apr 17 Javascript
使用async await 封装 axios的方法
Jul 09 Javascript
JS实现省市县三级下拉联动
Apr 10 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下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
php !function_exists("T7FC56270E7A70FA81A5935B72EACBE29"))代码解密
2011/01/07 PHP
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
关于crontab的使用详解
2013/06/24 PHP
php实现的CSS更新类实例
2014/09/22 PHP
php中的ini配置原理详解
2014/10/14 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
Git命令之分支详解
2021/03/02 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
JQuery 绑定事件时传递参数的实现方法
2009/10/13 Javascript
Javascript中valueOf与toString区别浅析
2013/03/19 Javascript
jQuery控制cookie过期时间的方法
2015/04/07 Javascript
javascript操作表格排序实例分析
2015/05/06 Javascript
js实现仿阿里巴巴城市选择框效果实例
2015/06/24 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
2015/11/06 Javascript
JavaScript的设计模式经典之代理模式
2016/02/24 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
Three.js实现绘制字体模型示例代码
2017/09/26 Javascript
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
浅析Vue中拆分视图层代码的5点建议
2019/08/15 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
2019/10/28 Javascript
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
python中pycurl库的用法实例
2014/09/30 Python
Python打包可执行文件的方法详解
2016/09/19 Python
Python 正则表达式入门(初级篇)
2016/12/07 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
信号生成及DFT的python实现方式
2020/02/25 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
淘宝店铺营销方案
2014/02/13 职场文书
三分钟演讲稿事例
2014/03/03 职场文书
勤奋学习演讲稿
2014/05/10 职场文书
企业文化标语大全
2014/06/10 职场文书
公司租房协议书
2014/10/14 职场文书
铁路安全反思材料
2014/12/24 职场文书
幼儿园中班教师个人总结
2015/02/05 职场文书
2016寒假社会实践心得体会范文
2015/10/09 职场文书