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 相关文章推荐
用window.location.href实现刷新另个框架页面
Mar 07 Javascript
JavaScript中的Web worker多线程API研究
Dec 06 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
Dec 16 Javascript
详解javascript传统方法实现异步校验
Jan 22 Javascript
ajax与json 获取数据并在前台使用简单实例
Jan 19 Javascript
jQuery插件ContextMenu自定义图标
Mar 15 Javascript
基于JS递归函数细化认识及实用实例(推荐)
Aug 07 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
Aug 21 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
Jan 03 Javascript
浅谈React碰到v-if
Nov 04 Javascript
Vue实现table上下移动功能示例
Feb 21 Javascript
vue项目引入ts步骤(小结)
Oct 31 Javascript
移动端滑动切换组件封装 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 数组教程 定义数组
2009/10/23 PHP
php自定义函数call_user_func和call_user_func_array详解
2011/07/14 PHP
PHP Parse Error: syntax error, unexpected $end 错误的解决办法
2012/06/05 PHP
php通过sort()函数给数组排序的方法
2015/03/18 PHP
ZendFramework框架实现连接两个或多个数据库的方法
2016/12/08 PHP
php中isset与empty函数的困惑与用法分析
2019/07/05 PHP
用js怎么把&字符换成"&amp:"
2006/10/19 Javascript
javascript取消文本选定的实现代码
2010/11/14 Javascript
Javascript中的Array数组对象详谈
2014/03/03 Javascript
深入理解Javascript中this的作用域
2014/08/12 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
Bootstrap自定义文件上传下载样式
2016/05/26 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
2016/07/01 Javascript
ES6中的数组扩展方法
2016/08/26 Javascript
vue 运用mock数据的示例代码
2017/11/07 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
2017/12/25 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
javascrit中undefined和null的区别详解
2019/04/07 Javascript
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
python在linux中输出带颜色的文字的方法
2014/06/19 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
执行Django数据迁移时报 1091错误及解决方法
2019/10/14 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
如何理解python对象
2020/06/21 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
Anaconda详细安装步骤图文教程
2020/11/12 Python
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
伊芙丽官方旗舰店:中国淑女一线品牌
2017/12/01 全球购物
介绍一下write命令
2012/09/24 面试题
Shell如何接收变量输入
2012/09/24 面试题
护理助产毕业生的求职信
2014/03/02 职场文书
四则混合运算教学反思
2016/02/23 职场文书
浅析MongoDB之安全认证
2021/06/26 MongoDB
python Tkinter模块使用方法详解
2022/04/07 Python
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL