通过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 相关文章推荐
jquery.validate使用攻略 第三部
Jul 01 Javascript
基于jQuery的实现简单的分页控件
Oct 10 Javascript
form表单只提交数据而不进行页面跳转的解决方案
Sep 18 Javascript
AngularJS入门教程之Hello World!
Dec 06 Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 Javascript
全面解析Bootstrap表单使用方法(表单样式)
Nov 24 Javascript
js对象浅拷贝和深拷贝详解
Sep 05 Javascript
详解AngularJS验证、过滤器、指令
Jan 04 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
基于vue.js组件实现分页效果
Dec 29 Javascript
JS实现换肤功能的方法实例详解
Jan 30 Javascript
Ajax实现局部刷新的方法实例
Mar 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
php截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
php实现快速排序的三种方法分享
2014/03/12 PHP
C# WinForm中实现快捷键自定义设置实例
2015/01/23 PHP
PHP中使用curl入门教程
2015/07/02 PHP
浅谈PHP的排列组合(如输入a,b,c 输出他们的全部组合)
2017/03/14 PHP
Dom加载让图片加载完再执行的脚本代码
2008/05/15 Javascript
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
JavaScript原型链示例分享
2014/01/26 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
基于javascript的JSON格式页面展示美化方法
2014/07/02 Javascript
javascript比较两个日期的先后示例代码
2014/12/31 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
2017/04/12 Javascript
vue刷新和tab切换实例
2018/02/11 Javascript
JavaScript迭代器的含义及用法
2019/06/21 Javascript
js实现无限瀑布流实例方法
2019/09/16 Javascript
JavaScript 替换所有匹配内容及正则替换方法
2020/02/12 Javascript
vue项目中使用rem,在入口文件添加内容操作
2020/11/11 Javascript
Windows下搭建python开发环境详细步骤
2020/07/20 Python
ubuntu安装sublime3并配置python3环境的方法
2018/03/15 Python
Python3中在Anaconda环境下安装basemap包
2018/10/21 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
python学生管理系统开发
2019/01/30 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
欧舒丹美国官网:L’Occitane美国
2018/02/23 全球购物
实习自我鉴定模板
2013/09/28 职场文书
酒店管理求职信
2014/06/09 职场文书
新闻传播专业求职信
2014/07/22 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
怎样写辞职信
2015/02/27 职场文书
留学推荐信(中英文版)
2015/03/26 职场文书
mysql聚集索引、辅助索引、覆盖索引、联合索引的使用
2022/02/12 MySQL