记录一次Vue大型项目高性能优化
前端Sharing
共 3992字,需浏览 8分钟
·
2021-11-08 00:09
一、背景
电子合同
采用表单设计器
+合同业务
配合实现,做了半年多后终于上线,但是下边员工普遍反映卡顿,甚至卡死,爆栈。尤其是新增和修改合同页面,因为这部分数据量大,逻辑复杂,很容易崩溃,所以决定进行性能优化。二、业务场景介绍
基础服务
(说白了就是组件库),为合同提供模板三、页面介绍
合同模板管理页 新增模板页面 新建合同页面 合同填写页面
四、卡顿分析
id,model,事件id
都是前端随机生成的,采用随机字符串+时间戳
的形式,一共46位。页面,组件,样式,业务
巨多,如果不做处理,不卡才怪五、性能优化
1. 第一次尝试
分组渲染
,先加载一个组,先让用户看到页面,然后在继续加载,一个一个,最终加载完成。这也是被大家认可的方案。<template v-show="itemManage==='group'">
template v-for="(item) in domainNodeList"
:key="item.id"
:formNode="item"
:parent="domainNodeList">
template>
template>
v-for
,做分组渲染,我想到使用vue的异步组件
实现,但是这是一个循环,所有的组件注册的都是同一个名字,这显然是不能用异步组件的,除非注册的是不同名字的组件,但是我想了很长时间都做出来效果,所以这二十多天,失败了。2.第二次尝试
webworker
。3.第三次尝试
ssr
,也就是服务端预渲染
。我们平常写的vue项目打包后生成dist
,运维会把这个文件夹放在服务器中,我们看到的页面其实就是生成执行的render函数
,这是比较耗时的。服务端
生成静态页面,然后交给客户端
渲染。nuxt
框架。关于nuxt框架我不多做介绍,可以自己去看文档(传送门)。这个框架有自己的脚手架,也是vue官方推荐的。element-UI
和我问自己的表单设计器,element只有部门组件支持ssr,像是表格和树
是不支持ssr的,所以就不存在服务端渲染了。4.第四次尝试
class="dialog-preview" v-show="!formLoading">
ref ="previewForm" onsubmit="return false"
:size="formSettingState.componentSize"
@hook:mounted="formMounted"
:model="formModels">
v-show="itemManage==='group'">
v-for ="(item) in cutDomainNodeList.one"
:key="item.id"
:formNode="item"
:parent="cutDomainNodeList.one">
v-if="itemManage==='group' && formLoadingTwo">
v-for ="(item) in cutDomainNodeList.two"
:key="item.id"
:formNode="item"
:parent="cutDomainNodeList.two">
v-if="itemManage==='group' && formLoadingThree">
v-for ="(item) in cutDomainNodeList.three"
:key="item.id"
:formNode="item"
:parent="cutDomainNodeList.three">
export default {
data() {
return {
formLoading: true,
formLoadingTwo: false,
formLoadingThree: false
}
},
computed: {
cutDomainNodeList () {
let { domainNodeList } = this;
let length = domainNodeList.length;
if ( length <= 4 ) {
return {
one: domainNodeList
}
}else {
return {
one: domainNodeList.filter((el, index) => index <=2 ),
two: domainNodeList.filter((el, index) => index>2 && index <=5 ),
three: domainNodeList.filter((el, index ) => index > 5)
}
}
},
methods: {
formMounted () {
setTimeout(() => { this.formLoading = false }, 500);
setTimeout(() => { this.formLoadingTwo = true }, 700);
setTimeout(() => { this.formLoadingThree = true}, 900);
}
}
}
html
中的el-form
这个标签,里边有个@hook:mounted="formMounted"
这句话,@hook:
+生命周期
代表在这个生命周期时执行,我们等mounted
执行完延时500mm开始加载第一块,700mm加载第二块,900毫秒加载第三块,这样分块加载的效果就出来了。六、其他方面优化
3.4MB
,这个就是个纯json
,让浏览器一下子加载这个么大的数据难免卡顿,所以我就在想能不能优化一下模板大小,从而能够提升加载速度。id,model,事件id
都是前端随机生成的,采用随机字符串+时间戳
的形式,一共46位,一个英文字符就是一个字节,这就是46个字节,所以我们可以缩短一下随机数的长度,从而减少一下模板大小。1.44MB
,缩短了一倍还多。300多kb
.七、总结
评论