vue性能优化

1、包体积与 Tree-shaking 优化

2、代码分割

代码分割是指构建工具将构建后的 JavaScript 包拆分为多个较小的，可以按需或并行加载的文件。通过适当的代码分割，页面加载时需要的功能可以立即下载，而额外的块只在需要时才加载，从而提高性能。

// lazy.js 及其依赖会被拆分到一个单独的文件中
// 并只在 `loadLazy()` 调用时才加载
function loadLazy() {
  return import('./lazy.js')
}

懒加载对于页面初次加载时的优化帮助极大，它帮助应用暂时略过了那些不是立即需要的功能。在 Vue 应用中，这可以与 Vue 的异步组件搭配使用，为组件树创建分离的代码块：

3、更新优化

让传给子组件的 props 尽量保持稳定。

只有活跃状态发生改变的项才应该更新。我们可以将活跃状态比对的逻辑移入父组件。

v-once:仅渲染元素和组件一次，并跳过之后的更新。

<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>

v-memo:该指令需要传入一个固定长度的依赖值数组进行比较。如果数组里的每个值都与最后一次的渲染相同，那么整个子树的更新将被跳过。

<div v-memo="[valueA, valueB]">
  ...
</div>

v-memo 传入空依赖数组 (v-memo="[]") 将与 v-once 效果相同.

当搭配 v-for 使用 v-memo，确保两者都绑定在同一个元素上。v-memo 不能用在 v-for 内部。

4、通过优化

可以通过列表虚拟化来提升性能，这项技术使我们只需要渲染用户视口中能看到的部分。

Vue 的响应性系统默认是深度的。但在数据量巨大时，深度响应性也会导致不小的性能负担，因为每个属性访问都将触发代理的依赖追踪。通过使用 shallowRef() 和 shallowReactive() 来绕开深度响应。浅层式 API 创建的状态只在其顶层是响应式的，对所有深层的对象不会做任何处理。

考虑这种优化的最佳场景还是在大型列表中。想象一下一个有 100 项的列表，每项的组件都包含许多子组件。在这里去掉一个不必要的组件抽象，可能会减少数百个组件实例的无谓性能消耗。