vue组件性能优化大全 - zptime/blog GitHub Wiki

开发性能优化

  1. 路由懒加载：用不同路由将对应组件分割成不同的代码块，实现按需加载，被访问时才加载对应组件
  2. 组件懒加载、异步组件
  3. 组件化开发：公共组件提取和封装，降低模块之间的耦合度，将相关的请求、资源、逻辑等都封装在内部
  4. 服务端渲染 SSR
  • 优点
    • 更好的 SEO
    • 首屏渲染更快
  • 缺点
    • 需要使用 NodeJS，增加开发难度
    • 服务端渲染增加了服务器的负载压力
    • 开发条件限制：生命周期、浏览器特定属性、第三方库的区别及兼容使用，毕竟服务端和客户端环境还是不太一样的
  1. 加载优先级处理：根据可见性来处理加载的优先级问题。首屏可见部分优先加载，其余的懒加载
  2. 判断可见性：监听滚动事件、resize 事件；IntersectionObserver
  • 监听滚动事件、resize 事件，代码繁琐，一不小心没有函数去抖就又可能导致严重的性能问题
  • IntersectionObserver 允许你配置一个回调函数，每当 target ，元素和设备视口或者其他指定元素发生交集的时候该回调函数将会被执行。这个 API 的设计是异步的，而且保证你的回调执行次数是非常有限的，而且回调是会在主线程空闲时才执行，在性能方面表现更优，使用起来也更简单。
  1. 骨架屏使用：替代白屏，提高可读性 提升用户感知体验；保证切换的一致性；提供可见性观察的目标对象

组件性能优化

  1. 函数式组件：一个不包含状态和实例的组件，减少响应式带来的性能消耗
  2. 局部变量：响应式对象和非响应式对象的合理使用，不需要响应的数据不要定义在 data 中，直接定义在实例上就行
  3. 长列表性能优化：可以通过 Object.freeze 方法来冻结一个对象，但不能被修改了。具体执行为：仅渲染视窗可见的数据、进行函数节流、 减少驻留的 VNode 和 Vue 组件，不使用显示的子组件 slot 方式，改为手动创建虚拟 DOM 来切断对象引用
  4. 使用 Deferred 组件延时分批渲染组件， 一次的组件渲染拆成多次
  5. 使用 Time slicing 时间片切割技术，避免页面卡死
  6. 使用 Non-reactive data 非响应式数据，减少递归响应式的逻辑，相当于减少了这部分的性能损耗
  7. 使用 Virtual scrolling 虚拟滚动组件
  8. computed 和 watch 的合理使用
  9. v-if 和 v-show 的合理使用
  10. 巧用 KeepAlive 动态组件缓存 DOM，避免不必要的性能浪费
  11. v-for 和 v-if 不要同时使用，可用计算属性代替 v-if
  12. v-for 必须添加 key，但不要用 index

参考文章：