vue-router路由懒加载的实现(解决vue项目首次加载慢)


Posted in Javascript onAugust 28, 2018

在Web应用程序中,系统的瓶颈常在于系统的响应速度。如果系统响应速度过慢,用户就会出现埋怨情绪,系统的价值也因此会大打折扣。因此,提高系统响应速度,是非常重要的。

懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用。

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

为什么需要懒加载?

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

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

如何实现?

懒加载写法:

vue-router路由懒加载的实现(解决vue项目首次加载慢)

非懒加载的路由配置:

vue-router路由懒加载的实现(解决vue项目首次加载慢)

还有一点:是我遇到的如果你遇到了就看下——就是用了懒加载后打完包直接运行那个index.html会报错,报文件引用错误其实是打包时候路径配置有点问题修改下就好了

如下图:

vue-router路由懒加载的实现(解决vue项目首次加载慢)

 

找到build下面的webpack.prod.conf.js 添加 publicPath:"./",

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery+CSS 半开折叠效果原理及代码(自写)
Mar 04 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
Mar 17 Javascript
jquery中的查找parents与closest方法之间的区别
Dec 02 Javascript
深入理解JavaScript单体内置对象
Jun 06 Javascript
jquery滚动条插件(可以自定义)
Dec 11 Javascript
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
vue项目关闭eslint校验
Mar 21 Javascript
node结合swig渲染摸板的方法
Apr 11 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
Apr 09 Javascript
微信小程序绘制图片发送朋友圈
Jul 25 Javascript
微信小程序防止多次点击跳转(函数节流)
Sep 19 Javascript
Vue父子之间值传递的实例教程
Jul 02 Javascript
JS实现Cookie读、写、删除操作工具类示例
Aug 28 #Javascript
vue组件开发之用户无限添加自定义填写表单的方法
Aug 28 #Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 #Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 #Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 #Javascript
Vue 应用中结合vux使用微信 jssdk的方法
Aug 28 #Javascript
对vux点击事件的优化详解
Aug 28 #Javascript
You might like
paypal即时到账php实现代码
2010/11/28 PHP
php一行代码获取文件后缀名实例分析
2014/11/12 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
2017/02/08 PHP
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
扩展IE中一些不兼容的方法如contains、startWith等等
2014/01/09 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
2015/11/23 Javascript
关于ES6箭头函数中的this问题
2018/02/27 Javascript
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
vue 移动端记录页面浏览位置的方法
2020/03/11 Javascript
解决vue init webpack 下载依赖卡住不动的问题
2020/11/09 Javascript
wxPython框架类和面板类的使用实例
2014/09/28 Python
python实现简单的计时器功能函数
2015/03/14 Python
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
浅谈终端直接执行py文件,不需要python命令
2017/01/23 Python
用Python设计一个经典小游戏
2017/05/15 Python
python中多个装饰器的执行顺序详解
2018/10/08 Python
在PyCharm下打包*.py程序成.exe的方法
2018/11/29 Python
在Python中Dataframe通过print输出多行时显示省略号的实例
2018/12/22 Python
基于python if 判断选择结构的实例详解
2019/05/06 Python
python PIL/cv2/base64相互转换实例
2020/01/09 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
canvas简单连线动画的实现代码
2020/02/04 HTML / CSS
台湾线上百货零售购物平台:friDay购物
2017/08/18 全球购物
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
哄娃神器4moms商店:美国婴童用品品牌
2019/03/07 全球购物
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
化学实验员岗位职责
2013/12/28 职场文书
初一学生评语大全
2014/04/24 职场文书
科长竞争上岗演讲稿
2014/05/12 职场文书
历史学专业求职信
2014/06/19 职场文书
横店影视城导游词
2015/02/06 职场文书
用javascript制作qq注册动态页面
2021/04/14 Javascript
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电