vue项目前端性能优化总结
1. 在vue中v-for和v-if不要放在同一个元素上使用。
由于 v-for 和 v-if 放在同一个元素上使用会带来一些性能上的影响. 官方给出的建议是在计算属性上过滤之后再进行遍历。
2. 动态加载组件。
在同一个页面中如果不需要立刻展示的组件,可以使用动态组件(动态组件主页面加载是不会加载,等到触发条件时才加载该组件,并且加载一次后就有缓存)。
3. 路由懒加载
当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
https://router.vuejs.org/zh/guide/advanced/lazy-loading.html
4.纯数据展示减少监听:Object.freeze
数据量比较大)的情况下,使用Object.freeze方法来包裹变量,那边vue内部不会使用defineproperty去监听数据内部的变化,只有本身变化时才会触发,在大量数据的情况下,vue内部不在去监听数据的变化会提高性能。
5. 组件缓存keep-alive
vue提供了keep-alive标签来存储缓存组件,对于一些视频控件object或图表类的使用,我们经常会使用v-if指令,而v-if是会创建和销毁的,如果频繁操作在ie下的内存会持续上升,而keep-alive可以有效的缓存,抑制内存的持续上升vue-keep-alive。
https://cn.vuejs.org/v2/api/#keep-alive
6. Es6集合Set()可优化遍历速度。
set集合是可用于查找该集合内是否存在某个元素。这种维度可有效的提高遍历效率。使用场景判断当一个数组中的元素是否在已选集合内
7. scope中元素选择器尽量少用
在 scoped 样式中,类选择器比元素选择器更好,因为大量使用元素选择器是很慢的。为了给样式设置作用域,Vue 会为元素添加一个独一无二的特性,例如 data-v-f3f3eg9。然后修改选择器,使得在匹配选择器的元素中,只有带这个特性才会真正生效,(比如 button[data-v-f3f3eg9])。问题在于大量的元素和特性组合的选择器 (比如 button[data-v-f3f3eg9]) 会比类和特性组合的选择器
慢,所以应该尽可能选用类选择器。
https://cn.vuejs.org/v2/style-guide/#scoped-中的元素选择器-谨慎使用
8. 单个vue文件过大,并未做组件提取、页面拆分和公共方法提取,大量冗余代码。
vue文件过大导致页面加载过慢,需要做组件的抽离,拆分成多个页面组件,比如tab页;封装公共方法函数库utils.js,暴露全局接口给各组件调用。
9. 组件按需加载优化
引入echart等第三方组件库,需要使用按需引入。
10. 组件优化
模块内按照布局或功能重新划分vue组件:
按模块划分路由。按照业务模块划分路由及子路由,保证模块间的隔离;
模块内按布局或功能划分组件。单个模块功能较多或逻辑较复杂时,按照布局划分为左右或上下及其组合模式划分组件,以子组件的方式放在模块中,方便打包优化、复用、功能拓展及维护;
能复用的组件尽量复用。布局、功能模块等均可复用,如:tab中的筛选条件、详情弹窗、表单等。
11. 打包优化
若打包出的vender.js和app.js较大,在浏览器调试窗口可看到这两个文件加载和解析时间需要几秒钟。App.js可通过组件懒加载解决,vender包该如何解决?
解决方案:
打包wender时不打包vue、vuex、vue-router、axios等,换为直接引入(需要在webpack中配置不需要打包的库)。
12. vue前端性能优化总结
Web项目中关于性能的优化有很多的开发细节需要注意,如js、css、vue等开发规范均需注意。在项目进行的各个阶段,如何避免性能差的问题的思考总结?
项目构建前:
1) 根据交互稿或视觉稿,合理划分pages,一般按照模块和子模块划分;
2) 使用路由懒加载,实现模块化与按需加载的效果,优化首屏性能;
3) 提取公共组件,尽量与业务隔离,如筛选条件等;
4) 提取公共方法,放在util.js中,如表单校验封装;
5) 提取在项目中出现较多的功能模块,如弹窗详情等;
6) 与后台开发人员定义接口协议,模块中能合并的尽量合并。
项目构建中和完成后:
1) 开启eslint验证,看到错误和警告信息及时解决;
2) 打开浏览器调试窗口,查看Network中从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息(包括状态、资源类型、大小、所用时间等),可以根据这个进行网络性能优化。如查看哪些http请求返回资源非常大或耗用时间较长,可针对处理;
3) 打开浏览器调试窗口,在Timeline中记录并分析在网站的生命周期内所发生的各类事件,以此可以提高网页的运行时间的性能;
4) 代码编写过程中不断思考是否可优化模块或做共性组件提取;
5) 及时代码审核,提高代码质量;
参考文档:
https://www.cnblogs.com/veritas-sj/p/10518046.html
https://blog.csdn.net/weixin_33786077/article/details/88731802