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 引起的安全问题
Dec 27 Javascript
JQuery 学习笔记 选择器之二
Jul 23 Javascript
使用jQuery的将桌面应用程序引入浏览器
Nov 19 Javascript
jQuery实现异步获取json数据的2种方式
Aug 29 Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
Mar 11 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
Sep 04 Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 Javascript
详解用场景去理解函数柯里化(入门篇)
Apr 11 Javascript
angular多语言配置详解
May 16 Javascript
Vue中使用better-scroll实现轮播图组件
Mar 07 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
Apr 26 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 insert语法详解
2008/06/07 PHP
php中运用http调用的GET和POST方法示例
2014/09/29 PHP
php中instanceof 与 is_a()区别分析
2015/03/03 PHP
Discuz!X中SESSION机制实例详解
2015/09/23 PHP
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
javascript eval函数深入认识
2009/02/21 Javascript
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
jQuery实现列表内容的动态载入特效
2015/08/08 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
ajax请求data遇到的问题分析
2018/01/18 Javascript
babel之配置文件.babelrc入门详解
2018/02/22 Javascript
如何制作一个Node命令行图像识别工具
2018/12/12 Javascript
一个小时快速搭建微信小程序的方法步骤
2019/04/15 Javascript
Antd的table组件表格的序号自增操作
2020/10/27 Javascript
[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片
2016/03/03 DOTA
使用Python中的线程进行网络编程的入门教程
2015/04/15 Python
Python编程之string相关操作实例详解
2017/07/22 Python
python抽取指定url页面的title方法
2018/05/11 Python
python批量修改文件编码格式的方法
2018/05/31 Python
Python numpy实现二维数组和一维数组拼接的方法
2018/06/05 Python
Python实现的爬取百度文库功能示例
2019/02/16 Python
详解Python3定时器任务代码
2019/09/23 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
在pytorch中动态调整优化器的学习率方式
2020/06/24 Python
idea2020手动安装python插件的实现方法
2020/07/17 Python
Python Selenium库的基本使用教程
2021/01/04 Python
详解python的xlwings库读写excel操作总结
2021/02/26 Python
全球异乡人的跨境社交电商平台:Kouhigh口嗨网
2020/07/24 全球购物
大学生未来职业生涯规划书
2014/02/15 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
反邪教观后感
2015/06/11 职场文书
庆元旦主持词
2015/07/06 职场文书
Ajax异步刷新功能及简单案例
2021/11/20 Javascript
Python TypeError: ‘float‘ object is not subscriptable错误解决
2022/12/24 Python