通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题


Posted in Javascript onApril 08, 2018

懒加载:也叫延迟加载,即在需要的时候进行加载,随用随载。

像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时。

简单的说就是:进入首页不用一次加载过多资源造成用时过长!!!

懒加载的方式:

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
//采用了懒加载
export default new Router({
 routes: [
  {
    path:'/',
    component:resolve => require(['@/components/index'],resolve)
  }
 ]
})

非懒加载的方式:

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'
Vue.use(Router)
export default new Router({
 routes: [
  {
    path:'/',
    component:index
  }
 ]
})

ps:下面看下vue-router路由懒加载

用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)
  }
 ]
})

总结

以上所述是小编给大家介绍的通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
7个Javascript地图脚本整理
Oct 20 Javascript
javascript中的undefined 与 null 的区别  补充篇
Mar 17 Javascript
jquery Mobile入门—多页面切换示例学习
Jan 08 Javascript
js判断为空Null与字符串为空简写方法
Feb 24 Javascript
JavaScript中的Array 对象(数组对象)
Jun 02 Javascript
js判断checkbox是否选中个数的方法(超简单)
Aug 19 Javascript
详解Angualr 组件间通信
Jan 21 Javascript
详解在 Angular 项目中添加 clean-blog 模板
Jul 04 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
Jul 05 Javascript
实例讲解Vue.js中router传参
Apr 22 Javascript
Redux实现组合计数器的示例代码
Jul 04 Javascript
Angular2之二级路由详解
Aug 31 Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 #Javascript
JS求Number类型数组中最大元素方法
Apr 08 #Javascript
angular2模块和共享模块详解
Apr 08 #Javascript
vue下拉列表功能实例代码
Apr 08 #Javascript
详解Vue-cli webpack移动端自动化构建rem问题
Apr 07 #Javascript
vue-cli开发环境实现跨域请求的方法
Apr 07 #Javascript
Angular5给组件本身的标签添加样式class的方法
Apr 07 #Javascript
You might like
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
JavaScript 私有成员分析
2009/01/13 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
2011/04/02 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
JavaScript实现图片切换效果
2017/08/12 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
angularJs select绑定的model取不到值的解决方法
2018/10/08 Javascript
[35:55]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.11
2020/12/13 DOTA
python求pi的方法
2014/10/08 Python
利用Python的Django框架中的ORM建立查询API
2015/04/20 Python
深入浅出学习python装饰器
2017/09/29 Python
Python使用遗传算法解决最大流问题
2018/01/29 Python
python批量读取txt文件为DataFrame的方法
2018/04/03 Python
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
python 匹配url中是否存在IP地址的方法
2018/06/04 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
Python 使用PIL中的resize进行缩放的实例讲解
2018/08/03 Python
python 的 scapy库,实现网卡收发包的例子
2019/07/23 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
Python优秀开源项目Rich源码解析的流程分析
2020/07/06 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
python爬虫请求头的使用
2020/12/01 Python
复古风格的女装和装饰品:ModCloth
2017/12/29 全球购物
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
党支部书记先进事迹
2014/01/17 职场文书
理工大学毕业生自荐信范文
2014/02/22 职场文书
小学生三分钟演讲稿
2014/08/18 职场文书
2014入党积极分子破除“四风”思想汇报
2014/09/14 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
乡镇2014法制宣传日活动总结
2014/11/01 职场文书
被委托人身份证明
2015/08/07 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
Python爬虫实战之爬取京东商品数据并实实现数据可视化
2021/06/07 Python
制作能在nginx和IIS中使用的ssl证书
2021/06/21 Servers