Vue基础性能优化

Vue的基础优化一般从两点出发，运行时性能优化、加载时性能优化，建议使用工具：Chrome Devtool里的“Performance工具（CPU 占用、内存占用、FPS 等问题）”、“Network（加载性能问题）”

一、运行时性能优化

1、开发环境下Vue会提供很多警告来帮你对付常见的错误与陷阱。而在生产环境下这些是没有用的，反而增加运行时开销。所以打包的时候尽量使用开发模式。

2、预编译模板最简单的方式就是使用单文件组件——相关的构建设置会自动把预编译处理好，所以构建好的代码已经包含了编译出来的渲染函数而不是原始的模板字符串。

3、当使用单文件组件时，组件内的 CSS 会以 <style> 标签的方式通过 JavaScript 动态注入。这有一些小小的运行时开销，将所有组件的 CSS 提取到同一个文件可以避免这个问题，也会让 CSS 更好地进行压缩和缓存。

4、利用Object.freeze()提升性能，Vue 在遇到像 Object.freeze() 这样被设置为不可配置之后的对象属性时，不会为对象加上 setter getter 等数据劫持的方法。

5、尽量扁平化接口返回数据，这样可避免一层层去遍历寻找我们想要的数据。

6、我们应该尽量减少直接写入 Storage 的频率（多次写入操作合并为一次、只有在必要的时候才写入），避免持久化存储的容量持续增长。

7、如果你的应用存在非常长或者无限滚动的列表，那么采用窗口化的技术来优化性能，只需要渲染少部分区域的内容，减少重新渲染组件和创建 dom节点的时间。

8、使用懒加载在不可见时只需要渲染一个骨架屏，不需要真正渲染组件。

9、可以使用keep-alive，keep-alive是Vue提供的一个比较抽象的组件，用来对组件进行缓存，从而节省性能。

<keep-alive>
    <loading></loading>
</keep-laive>

10、for循环设置key值，在用v-for进行数据遍历渲染的时候，为每一项都设置唯一的key值，为了让Vue内部核心代码能更快地找到该条数据，当旧值和新值去对比的时候，可以更快的定位到diff。

11、按需引入，咱们使用的一些第三方库可以通过按需引入的方式加载。避免引入不需要使用的部分。

import { useStore } from 'vuex'

二、Vue 应用加载性能优化建议

1、利用服务端渲染（SSR）和预渲染（Prerender）来优化加载性能，还有单页应用比较大的问题是首屏可见时间过长，基本分为服务端渲染、预渲染。

2、通过组件懒加载优化超长应用内容加载性能,使用组件懒加载方案对于超长内容的应用初始化渲染很有帮助，可以减少大量必要的资源请求，缩短渲染关键路径。