vue-router懒加载速度缓慢问题及解决方法


Posted in Javascript onNovember 25, 2018

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

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

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

vue-router懒加载速度缓慢问题及解决方法

懒加载的方式:

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

下面看下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 相关文章推荐
javascript 避免闭包引发的问题
Mar 17 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
Dec 02 Javascript
用javascript关闭本窗口不弹出询问框的方法
Sep 12 Javascript
jquery表单验证插件formValidator使用方法
Apr 01 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
Feb 27 Javascript
JS组件系列之JS组件封装过程详解
Apr 28 Javascript
vue router使用query和params传参的使用和区别
Nov 13 Javascript
bootstrap datetimepicker控件位置异常的解决方法
Nov 23 Javascript
对vuex中getters计算过滤操作详解
Nov 06 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
Dec 10 Javascript
js轮播图之旋转木马效果
Oct 13 Javascript
jQuery实现简单弹幕制作
Dec 10 jQuery
移动端滑动切换组件封装 vue-swiper-router实例详解
Nov 25 #Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 #Javascript
vue中tab选项卡的实现思路
Nov 25 #Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
Nov 25 #Javascript
vscode 开发Vue项目的方法步骤
Nov 25 #Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
Nov 25 #Javascript
electron + vue项目实现打印小票功能及实现代码
Nov 25 #Javascript
You might like
PHP的宝库目录--PEAR
2006/10/09 PHP
php处理斐波那契数列非递归方法
2012/02/04 PHP
记录PHP错误日志 display_errors与log_errors的区别
2012/10/09 PHP
可兼容php5与php7的cURL文件上传功能实例分析
2018/05/11 PHP
php微信开发之图片回复功能
2018/06/14 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
javascript 拖放效果实现代码
2010/01/22 Javascript
商城常用滚动的焦点图效果代码简单实用
2013/03/28 Javascript
JS脚本defer的作用示例介绍
2014/01/02 Javascript
Android中的jQuery:AQuery简介
2014/05/06 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
2015/11/30 Javascript
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
2016/05/16 Javascript
js实现div模拟模态对话框展现URL内容
2016/05/27 Javascript
最全的Javascript编码规范(推荐)
2016/06/22 Javascript
jQuery 特性操作详解及实例代码
2016/09/29 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
2016/11/05 Javascript
AngularJS中指令的四种基本形式实例分析
2016/11/22 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
2017/09/16 Javascript
VSCode中如何利用d.ts文件进行js智能提示
2018/04/13 Javascript
小程序如何构建骨架屏
2019/05/29 Javascript
微信小程序canvas分享海报功能
2019/10/31 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
2020/08/10 Javascript
python获取外网IP并发邮件的实现方法
2017/10/01 Python
Python算法输出1-9数组形成的结果为100的所有运算式
2017/11/03 Python
Python爬虫工程师面试问题总结
2018/03/22 Python
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
详解pandas使用drop_duplicates去除DataFrame重复项参数
2019/08/01 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
Python with标签使用方法解析
2020/01/17 Python
Python实现汇率转换操作
2020/05/03 Python
复核员上岗演讲稿
2014/01/05 职场文书
超市重阳节活动方案
2014/02/10 职场文书
自动化专业毕业生求职信
2014/06/18 职场文书
婚礼答谢词
2015/01/04 职场文书
2016年党员干部公开承诺书
2016/03/24 职场文书