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
文章评论