vue项目前端性能优化总结_蓝戒的博客


vue项目前端性能优化总结

1. 在vuev-forv-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.jsapp.js较大,在浏览器调试窗口可看到这两个文件加载和解析时间需要几秒钟。App.js可通过组件懒加载解决,vender包该如何解决?

解决方案:

打包wender时不打包vuevuexvue-routeraxios等,换为直接引入(需要在webpack中配置不需要打包的库)。

12. vue前端性能优化总结

Web项目中关于性能的优化有很多的开发细节需要注意,如jscssvue等开发规范均需注意。在项目进行的各个阶段,如何避免性能差的问题的思考总结?

项目构建前:

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

本文固定链接: http://www.webzsky.com/?p=1392 | 蓝戒的博客

cywcd
该日志由 cywcd 于2019年10月28日发表在 javascript 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: vue项目前端性能优化总结 | 蓝戒的博客
关键字: ,

vue项目前端性能优化总结:等您坐沙发呢!

发表评论


快捷键:Ctrl+Enter
来自的朋友,欢迎您 点击这里 订阅我的博客 o(∩_∩)o~~~
×