Vue性能优化

页面加载优化

• 选用正确的架构：对页面加载性能很敏感，选择服务器端渲染 (SSR) 或静态站点生成 (SSG) ；只是为了优化为数不多的营销页面的 SEO，直接选用SSG
• 包体积与 Tree-shaking 优化
  • 使用生产环境构建，模板预编译
  • 尽量选择提供 ES 模块格式的依赖，如lodash-es
• 代码分割
  • 打包工具可以通过分析 ESM 动态导入的语法来自动进行代码分割
  • defineAsyncComponent 异步组件
  • 懒加载路由 vue-router

更新优化

• 尽量保持子组件的 props 稳定
• 使用 v-once 渲染依赖运行时数据但无需再更新的内容
• 使用 v-memo 条件地跳过某些大型子树或者 v-for 列表的渲染 仅在 3.2+ 中支持
• 计算属性稳定性，在 Vue 3.4 及更高版本中，计算属性仅在其计算值较前一个值发生更改时才会触发副作用
• 使用 KeepAlive 缓存不活跃的组件

通用优化

• 虚拟列表，不需要立刻渲染出全部的列表 始终使用 key
• 减少大型不可变数据的响应性开销，使用 shallowRef shallowReactive 绕开深度响应
• 避免不必要的组件抽象，针对列表，去掉一个不必要的组件抽象，可能会减少数百个组件实例的无谓性能消耗。

参考链接

性能优化 | Vue.js