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读取cookies)
Jan 11 Javascript
js实现图片轮换效果代码
Apr 16 Javascript
Jquery Ajax方法传值到action的方法
May 11 Javascript
使用不同的方法结合/合并两个JS数组
Sep 18 Javascript
推荐8款jQuery轻量级树形Tree插件
Nov 12 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
深入理解JavaScript 参数按值传递
May 24 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
Sep 21 Javascript
详解在create-react-app使用less与antd按需加载
Dec 06 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
Feb 21 Javascript
vue data有值,但是页面{{}} 取不到值的解决
Nov 09 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
基于qmail的完整WEBMAIL解决方案安装详解
2006/10/09 PHP
3种php生成唯一id的方法
2015/11/23 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
php+js实现裁剪任意形状图片
2018/10/31 PHP
IE JS编程需注意的内存释放问题
2009/06/23 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
Jquery chosen动态设置值实例介绍
2013/08/08 Javascript
JavaScript设置首页和收藏页面的小例子
2013/11/11 Javascript
利用NodeJS和PhantomJS抓取网站页面信息以及网站截图
2013/11/18 NodeJs
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
BootStrap Validator使用注意事项(必看篇)
2016/09/28 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
webpack+vue.js快速入门教程
2016/10/12 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
Angular使用Md5加密的解决方法
2017/09/16 Javascript
switchery按钮的使用方法
2017/12/18 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
2019/11/14 Javascript
javascript canvas封装动态时钟
2020/09/30 Javascript
在Django框架中伪造捕捉到的URLconf值的方法
2015/07/18 Python
Python实现代码统计工具(终极篇)
2016/07/04 Python
python重试装饰器的简单实现方法
2019/01/31 Python
python变量命名的7条建议
2019/07/04 Python
Django 创建/删除用户的示例代码
2019/07/24 Python
Django自带日志 settings.py文件配置方法
2019/08/30 Python
django ORM之values和annotate使用详解
2020/05/19 Python
美的官方商城:Midea
2016/09/14 全球购物
Zooplus葡萄牙:欧洲领先的网上宠物商店
2018/07/01 全球购物
Lowe’s加拿大:家居装修、翻新和五金店
2019/12/06 全球购物
Java中compareTo和compare的区别
2016/04/12 面试题
区三好学生主要事迹
2014/01/30 职场文书
电子信息专业自荐书
2014/02/04 职场文书
元旦趣味活动方案
2014/08/22 职场文书
基层党员对照检查材料
2014/08/25 职场文书
运动会加油稿30字
2015/07/21 职场文书
交通安全主题班会
2015/08/12 职场文书
HttpClient实现表单提交上传文件
2022/08/14 Java/Android