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 window.opener的用法分析
Apr 07 Javascript
几个有趣的Javascript Hack
Jul 24 Javascript
Jquery公告滚动+AJAX后台得到数据
Apr 14 Javascript
jquery.post用法关于type设置问题补充
Jan 03 Javascript
jquery选择器之基本过滤选择器详解
Jan 27 Javascript
jQuery选择器源码解读(二):select方法
Mar 31 Javascript
JS中script标签defer和async属性的区别详解
Aug 12 Javascript
javascript 内置对象及常见API详细介绍
Nov 01 Javascript
基于JavaScript实现自动更新倒计时效果
Dec 19 Javascript
vue如何截取字符串
May 06 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
Mar 07 Javascript
解决vue一个页面中复用同一个echarts组件的问题
Jul 19 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实现ODBC数据分页显示一例
2006/10/09 PHP
php socket方式提交的post详解
2008/07/19 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
JS中style属性
2006/10/11 Javascript
js中小数转换整数的方法
2014/01/26 Javascript
jquery选择器之层级过滤选择器详解
2014/01/27 Javascript
jQuery实现带滚动线条导航效果的方法
2015/01/30 Javascript
jquery操作复选框checkbox的方法汇总
2015/02/05 Javascript
JS实现让访问者自助选择网页文字颜色的方法
2015/02/24 Javascript
理解javascript闭包
2015/12/15 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
2017/02/05 Javascript
Vue header组件开发详解
2018/01/26 Javascript
原生JS实现多个小球碰撞反弹效果示例
2018/01/31 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
2018/05/30 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
2019/04/28 jQuery
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
编写Python CGI脚本的教程
2015/06/29 Python
python中如何使用正则表达式的非贪婪模式示例
2017/10/09 Python
浅析python打包工具distutils、setuptools
2018/04/20 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
使用python的pexpect模块,实现远程免密登录的示例
2019/02/14 Python
15行Python代码实现网易云热门歌单实例教程
2019/03/10 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
浅谈pytorch grad_fn以及权重梯度不更新的问题
2019/08/20 Python
使用pytorch实现论文中的unet网络
2020/06/24 Python
采购员的工作职责
2013/12/26 职场文书
毕业生欢送会主持词
2014/03/31 职场文书
C++程序员求职信范文
2014/04/14 职场文书
汉语言文学毕业求职信
2014/07/17 职场文书
2014年环保工作总结
2014/11/26 职场文书
余世维讲座观后感
2015/06/11 职场文书
Python入门之基础语法详解
2021/05/11 Python
redis 存储对象的方法对比分析
2021/08/02 Redis
Mysql使用全文索引(FullText index)的实例代码
2022/04/03 MySQL