Vue 中直接上手的性能优化方案

共 2535 字，预计阅读 13 分钟

最近使用 Vue 开发的过程中使用到一些对于性能有所提升的编码方式，所以特别梳理出来，可以作为后续 Vue 开发的编码规范使用

性能优化方案主要分为三类，下面就详细讲讲这三类优化方案的应用

  • 减少响应式使用
  • 减少 DOM 渲染
  • 减少打包体积

减少响应式使用

Vue 中使用最方便的就是响应式的变量，在读取（get）对象属性的时候收集副作用函数（effect）依赖，在写入（set）属性时取出副作用函数依赖执行，但是收集依赖、触发依赖执行毕竟都会影响到性能，所以在明确知道不需要使用响应式变量的场景下，就应该减少响应式变量的使用

1. 使用 computed 缓存计算结果

computed 和普通方法的区别在于：computed 会缓存计算结果，只有当计算的内容改变的时候才会重新计算，而普通方法每次都会重新计算。所以对于有计算逻辑的取值，建议尽量都通过 computed 来封装一层

比如下面这个示例就是简单的将 props 通过 computed 封装一层后共 template 使用

const getTooltipStyle = computed((): CSSProperties => {
  return {
    color: props.color,
    fontSize: props.fontSize,
  }
})

2. 本地化响应式变量

根据 Vue 响应式变量的原理，每次访问响应式数据时，都会收集依赖，所以在需要频繁使用响应式变量的时候，可以先将响应式变量用一个本地变量存储，转换为一个非响应式的变量

在 Vue3 中可以使用 unref 这个 api 来获取到响应式变量参数本身（Vue2 中直接通过 this 赋值就好）

const tableData = ref([])

const unrefTableData = unref(tableData) // 本地化变量后再做大量操作
unrefTableData.forEach((item) => {
  // 具体操作
})

3. 函数式组件（Vue2）

函数式组件是指：只接受一些 prop 参数，无响应式数据，无实例的组件，主要应用在创建简单的展示组件，比如标题 header、纯展示的表单等等。因为没有响应式数据和实例，所以初始化速度比普通有状态的组件快很多，并且还支持返回多个节点

在 Vue2 中声明函数式组件的方式如下

<!-- template 中的声明方式 -->
<template functional></template>

<!-- jsx 中的声明方式 -->
Vue.component("list", { functional: true, })

但是在 Vue3 中，有状态的组件性能已经大大提升，和无状态组件（函数式组件）几乎没有差异，并且有状态组件也支持了返回多个节点，所以官方也移除了 functional 定义函数式组件的方式，注意 Vue3 中是不兼容 Vue2 的函数式组件定义，所以如果未来打算升级 Vue3 的小伙伴就不建议使用函数式组件了

减少 DOM 渲染压力

1. DOM 频繁切换展示的情况使用 v-show

这是一个老身长谈的优化方案了，原理在于 v-if 和 v-show 实现方式的区别，对于 v-if 在不符合条件的情况下不会渲染 DOM 节点，对于 v-show 则是将各个条件情况都渲染出来，在通过 display: block / none 进行切换，所以在频繁切换 DOM 展示情况的场景下，使用 v-show 的性能会相对更好，比如一个可编辑单元格需要频繁切换编辑和保存后的状态的时候

但 v-show 也不是没有缺点，因为会把各个分支情况都提前渲染出来，如果节点很多并且不需要频繁切换状态，用 v-if 会是更好的选择

2. keep-alive 缓存组件状态

在 Vue 中切换组件时，组件内部的状态也会丢失，比如我们在填写一个表单的时候，切换到另外一个组件填写其他信息，在切换回之前的表单组件后，原来填写的信息会被刷新掉，这种情况下就会使用到 keep-alive 组件缓存组件状态

比较常用的做法是在 <router-view> 标签内嵌套一层 <transition> 标签增加组件切换时的过渡动画效果，再嵌套一层 <keep-alive> 标签缓存组件状态，最后使用 <component> 渲染动态组件或者元素

<router-view>
  <template #default="{ Component, route }">
    <transition>
       <keep-alive>
         <component :is="Component" :key="route.path" />
     </keep-alive>
    </transition>
  </template>
</router-view>

3. 路由懒加载

我们都知道 Vue 是单页面页面应用，如果在首屏加载的时候就把所有需要使用的路由都加载出来的话，那就太浪费性能了，所以使用懒加载的方式加载路由，减少首屏加载的压力，才是更合理的方案

在 vue-router 中使用路由懒加载需要通过箭头函数返回一个 import 组件的路径，这样在运行到这个组件的时候，才会运行 import 编译加载组件

const form: AppRouteRecordRaw = {
  path: '/basicForm',
  name: 'BasicForm',
  component: () => import('/@/views/form/index.vue'),
  meta: {
    title: '基础表单',
  },
}

export default form

4. 图片懒加载

图片使用懒加载的原因和路由懒加载类似，都是为了减少不必要的渲染。比如我们有一张很长的页面有很多数据或者图片需要展示，而显示屏幕的可视高度却是固定的，所以在屏幕高度外的内容完全可以等到页面需要的时候再加载，从而减少了可是屏幕区域内的渲染压力

图片懒加载的原理是：判断图片出现在当前窗口时，将 data-src 替换为 src 加载图片，比较常用三个可视区域判断方式是

  • img.getBoundingClientRect().top < document.documentElement.clientHeight（元素相对于窗口位置 < 窗体高度）
  • IntersectionObserver api，当其监听到目标元素的可见部分到达屏幕高度内，执行指定的回调函数
  • loading="lazy" 属性（目前兼容性不是特别好，参考Lazy loading - Web 性能）

在 Vue 中使用图片懒加载推荐使用 vue-lazyload 这个插件，直接通过 v-lazy 这个指令就可以实现图片懒加载的效果

<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >
  </li>
</ul>

5. 组件销毁时要清除定时器、EventListener

有时我们会在项目中开启 setTimeout 来定时触发一些事件，比如定时提醒表单保存之类的需求，如果在离开组件时没有及时清除掉定时器或者是 EventListener ，很多页面堆积起来很容易造成页面卡顿和内存泄漏

常见的方案是在离开组件之前的 onBeforeUnmount 生命周期钩子中清除掉定时器和 EventListener

onBeforeUnmount(() => {
  try {
    instance?.destroy?.()
  } catch (error) {
    instanceRef.value = null
  }
})

在清除 EventListener 要注意：移除相同的函数。以下第一种情况不能清理掉 click 事件，因为它们是不同的函数对象，需要使用第二种指向相同函数对象的方式清除

// 这种情况不生效，因为指向的是不同函数对象
input.addEventListener('click', () => console.log('Hello'))
input.removeEventListener('click', () => console.log('Hello'))

// 此时指向相同的函数对象才能清理掉 EventListener 事件
function handler() {
  console.log('Hello')
}

input.addEventListener('click', () => handler)
input.removeEventListener('click', () => handler)

6. 列表使用唯一 key

这个主要是和 diff 算法的效率有关，所以我也把它作为减少 DOM 渲染压力的一个方案。在我们使用 v-for 循环渲染内容的时候，需要为每个组件分配一个 id，这样在组件内容有更新的时候，diff 算法通过 id 能够更高效的找到变化的节点，让 dom 渲染更迅速。同时需要注意分配的 id 最好不是数组的 index，因为一旦增加或减少数组元素，index 也会发生变化，这样就失去 id 的效果了

<template v-for="schema in getSchema" :key="schema.field">
  <form-item
    :schema="schema"
    :form-props="getProps"
    :all-default-values="defaultValueRef"
  />
</template>

减少打包体积

1. 开启 gzip 压缩

gzip 一种文件压缩的格式，比较适合文本文件的压缩，通常会缩小两倍以上的体积，所以用在代码文件的压缩上非常合适

我们现在使用的打包工具还是 webpack，在 webpack 中开启 gzip 打包的话可以使用 compression-webpack-plugin 这个插件，具体配置如下

const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {
  configureWebpack: {
    plugins: [
      new CompressionPlugin({
        test: /\.(js|css|json|html)&/,
        tereshold: 10 * 1024, // 超过 10 k 才压缩
      }),
    ],
  },
}

开启 gzip 除了要在代码中增加配置外，还需要服务端的支持，在前端中比较常用的是 Nginx，在 Nginx 中开启 gzip 压缩的主要配置参数如下

#开启和关闭gzip模式
gzip on;

#gizp压缩起点，文件大于10k才进行压缩
gzip_min_length 10k;

# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间，一般为 5，再大效果就不明显了
gzip_comp_level 5;

# 进行压缩的文件类型。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript ;

#nginx对于静态文件的处理模块，开启后会寻找以.gz结尾的文件，直接返回，不会占用cpu进行压缩，如果找不到则不进行压缩
gzip_static on

# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;

# 设置压缩所需要的缓冲区大小，以4k为单位，如果文件为7k则申请2*4k的缓冲区
gzip_buffers 2 4k;

# 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.1;

2. 按需引入第三方组件

我们平时使用的 UI 组件一般都是大而全的，我们的项目中很少会全部使用到，所以按需引入第三方组件，能够有效减少应用包体积

以我们现在使用的 Element Plus 组件为例，使用 unplugin-vue-components 和 unplugin-auto-import 这两个插件来实现（参考官方教程）

首先引入两个插件

pnpm i -D unplugin-vue-components unplugin-auto-import

然后再 Webpack 配置两个插件即可

// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  // ...
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}
#前端技术

继续阅读

vue 中优雅的捕获 Promise 异常

vue 中优雅的捕获 Promise 异常

前端代码整洁之道：lint 标准化

统一规范的格式不仅看着舒服了一些，还可以提前检查出一些潜在的问题、增强项目的维护性，何乐而不为呢？这周正好完成了风格规范的统一，下面也借机梳理一下使用到的代码检查工具（简称为 lint 工具）的配置流程