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 router安装及使用方法解析
Dec 02 Vue.js
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
Vue中引入svg图标的两种方式
Jan 14 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
vue 实现上传组件
May 31 Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 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 修改zen-cart下单和付款流程以防止漏单
2010/03/08 PHP
ThinkPHP惯例配置文件详解
2014/07/14 PHP
PHP经典面试题集锦
2015/03/19 PHP
实例简介PHP的一些高级面向对象编程的特性
2015/11/27 PHP
Yii框架视图、视图布局、视图数据块操作示例
2019/10/14 PHP
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
javascript实现滑动解锁功能
2014/12/31 Javascript
浅谈JavaScript字符串与数组
2015/06/03 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
2017/10/24 Javascript
动手写一个angular版本的Message组件的方法
2017/12/16 Javascript
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
2018/10/01 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
vue cli 3.0 搭建项目的图文教程
2019/05/17 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
2019/10/10 jQuery
JS判断数组是否包含某元素实现方法汇总
2020/06/24 Javascript
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
Python 绘图和可视化详细介绍
2017/02/11 Python
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
Python设计模式之中介模式简单示例
2018/01/09 Python
Python操作mysql数据库实现增删查改功能的方法
2018/01/15 Python
python入门教程 python入门神图一张
2018/03/05 Python
Python 学习教程之networkx
2019/04/15 Python
python实现两个经纬度点之间的距离和方位角的方法
2019/07/05 Python
Python笔记之观察者模式
2019/11/20 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
pandas to_excel 添加颜色操作
2020/07/14 Python
利用CSS3的flexbox实现水平垂直居中与三列等高布局
2016/09/12 HTML / CSS
化工专业推荐信范文
2013/11/28 职场文书
校园环保建议书
2014/05/14 职场文书
语文课外活动总结
2014/08/27 职场文书
爱国教育主题班会
2015/08/14 职场文书
企业管理不到位检讨书
2019/06/27 职场文书