Vue通过懒加载提升页面响应速度


Posted in Vue.js onMay 10, 2021

概述

项目的目的是要通过数据透视表和Excel公式来分析公司的各项运营数据。不过在集成后,在开发环境页面运行流畅,大量数据加载处理也很快。但是发布生产后,在用户每次打开页面时,加载时间上相较开发阶段均有所降低,经过排查速度变慢是由于发布包的vendor.js变大所导致的,这个文件加载每次都需300毫秒左右,由于小的Vue项目并没有做模块划分,所以所有的代码都直接打包到了vendor中,在集成了新功能后,发布包也随之变大了。

既然找到了原因,就开始着手优化,在前端对于需加载较大资源时,一般都采用懒加载的方式来优化效率。

什么是懒加载?

懒加载也叫做延时加载,在网页响应时不立刻请求资源,待页面加载完毕或者按需响应时再加载资源,以达到提高页面响应速度以及节省服务器资源的谜底。网页中常用的懒加载是图片的懒加载,对于类似淘宝一样的多图页面,如果等待所有图片都下载完成再响应用不必然造成页面加载的卡顿。对于JS资源的加载也是同样的道理,大JS的加载会造成JS阻塞,页面出现停止响应的假死状态。因此可以通过按需加载的方式,提高页面首屏的加载速度。

总结了具体优化步骤,下面我们就开始着手优化吧!

开始优化

首先是项目环境:Vue 2.6

开发环境:Vue-cli 4.5 + TypeScript 3.9

划分业务模块

通过路由异步加载模块,加速首屏以及其他页面加载速度,在Vue Router中将webExcel模块配置为懒加载模式,配置后webExcel组件会按照指定的webpackChunkName打包为单独的文件,并在访问webExcel路由的时候才会加载。这样访问home以及about页面时并不会加载webExcel资源。

Vue通过懒加载提升页面响应速度

懒加载路由配置

打包发布访问页面,首屏秒开,直接访问about依旧秒开。可是查看网络请求时候发现访问首页时请求了about和web Excel的资源。经过排查发现vue-cli在页面中使用了preload和prefetch预加载机制,在不影响当前页面加载的情况下预加载后续页面需要的资源提升用户体验,这里为了演示清晰注释掉prefetch的资源。

Vue通过懒加载提升页面响应速度

(临时禁用prefetch预加载)

开启路由懒加载后首页并未加载about和webExcel。

Vue通过懒加载提升页面响应速度

(首页Home网络请求)

清理网络请求记录,点击Web Excel,访问webExcel页面,此时会请求webExcel资源并展示组件。

Vue通过懒加载提升页面响应速度

(webExcel页面网络请求)

在线Excel组件懒加载

进一步优化使用插件页面打开速度

优化了路由加载,为了提升用户体验,进一步优化webExcel页面,开启组件懒加载,当需要Designer组件的时候再加载。

开启异步组件的方式类似于路由,直接配置import组件即可,替换原有的静态import。

Vue通过懒加载提升页面响应速度

(组件懒加载)

这里我们一步到位使用AsyncComponent配置,这样在加载组件(loading)时候可以给用户一个提示。

Vue通过懒加载提升页面响应速度

(页面模板)

Vue通过懒加载提升页面响应速度

(异步组件懒加载)

页面上通过displayDesigner属性控制Designer组件是否显示,setTimeout 3秒后开始加载Designer组件并展示。LoadingComponent在加载时展示loading状态。

Vue通过懒加载提升页面响应速度

Vue通过懒加载提升页面响应速度

可以从网络请求中看到,webExcel加载完3秒后开始请求designer资源,请求时显示LoadingComponent,请求完毕展示Desinger 组件。

开启gzip压缩,加速资源请求速度

为了进一步加速资源请求,可以开启服务器gizp压缩,目前大部分浏览器都支持gzip,可以开启服务器的gzip功能,服务器在传输资源之前先进行压缩。

网络请求Request中会出现如下内容,就表示支持gzip

Accept-Encoding: gzip, deflate, br

Vue-cli可以在打包时就将资源提前进行gzip打包,这样服务器直接返回打包后的资源不需要再次打包了。通过使用compression-webpack-plugin插件可以在打包时直接生成gz压缩文件。关于gzip的配置可以根据具体部署情况设置。

总结

经过以上优化,首屏加载资源仅需Vue基础组件和Home页面组件,首屏加载速度回复到原始200毫秒。其他未使用Designer组件的页面也无需加载资源,同时Designer组件加载一次,后续其他页面再使用组件也无需再次加载

以上就是关于Vue路由和组件懒加载的一些配置,不过懒加载不是万能的,还是要从实际需求出发决定是否使用。

以上就是Vue通过懒加载提升页面响应速度的详细内容,更多关于Vue懒加载提升响应速度的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
浅析VUE防抖与节流
Nov 24 Vue.js
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
Vue $attrs & inheritAttr实现button禁用效果案例
Dec 07 Vue.js
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
vuex的使用和简易实现
Jan 07 Vue.js
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
Vue 数据响应式相关总结
Jan 28 Vue.js
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
vue引入Excel表格插件的方法
Apr 28 Vue.js
Vue全家桶入门基础教程
May 14 Vue.js
Vue详细的入门笔记
如何理解Vue前后端数据交互与显示
Vue实现下拉加载更多
May 09 #Vue.js
如何使用vue3打造一个物料库
vue完美实现el-table列宽自适应
关于Vue Router的10条高级技巧总结
May 06 #Vue.js
Vue项目中如何封装axios(统一管理http请求)
May 02 #Vue.js
You might like
PHP开发中常用的字符串操作函数
2011/02/08 PHP
php获取后台Job管理的实现代码
2011/06/10 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
YII2框架中查询生成器Query()的使用方法示例
2020/03/18 PHP
PHP快速导出百万级数据到CSV或者EXCEL文件
2020/11/27 PHP
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
2007/02/22 Javascript
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
判断ie的两种简单方法
2013/08/12 Javascript
JavaScript splice()方法详解
2020/09/22 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
2014/08/15 Javascript
javascript实现密码强度显示
2015/03/18 Javascript
JS制作类似选项卡切换的年历
2016/12/03 Javascript
利用transition实现文字上下抖动的效果
2017/01/21 Javascript
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
PyQT实现多窗口切换
2018/04/20 Python
python使用openCV遍历文件夹里所有视频文件并保存成图片
2020/01/14 Python
IntelliJ 中配置 Anaconda的过程图解
2020/06/01 Python
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
来自全球大都市的高级街头服饰:Pegador
2018/01/03 全球购物
bonprix匈牙利:女士、男士和儿童服装
2019/07/19 全球购物
精选奢华:THE LIST
2019/09/05 全球购物
学期自我鉴定范文
2013/10/01 职场文书
超市中秋节活动方案
2014/02/12 职场文书
商业融资计划书
2014/04/29 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
考试作弊检讨书1000字(5篇)
2014/10/19 职场文书
建国大业观后感800字
2015/06/01 职场文书
离职证明范本
2015/06/12 职场文书
护理工作心得体会
2016/01/22 职场文书
2016优秀青年志愿者事迹材料
2016/02/25 职场文书
关于战胜挫折的名言警句大全!
2019/07/05 职场文书
如何在CSS中绘制曲线图形及展示动画
2021/05/24 HTML / CSS
如何理解python接口自动化之logging日志模块
2021/06/15 Python
详解Python requests模块
2021/06/21 Python