性能优化的指标：首屏速度，白屏速度。 操作速度，和渲染速度。
性能优化的方案
首屏速度，白屏速度
首屏速度：减少首屏资源体积(打包工具的压缩代码，异步加载，将一些库更新为体积更小的新版本，能不用第三方库就不用第三库，编写代码尽量减少体积，去除大的base64体积)
- 异步加载：体积比较大，又不需要立即使用的东西；路由懒加载，图片懒加载
- 打包工具--tree-shaking（可以去除掉没有使用过的代码，一些老版本的库替换成新版本支持treeshaking的库）
- 不使用第三方库
- 编写代码尽量减小体积
- 项目里的图片（没有配置好，一些大图片），转为base64，放入js文件里了
- 骨架屏，loading遮罩，先让屏幕不白，减少用户焦虑。
操作速度，渲染速度
什么情况下会造成操作卡顿和渲染慢
1，一次性操作大量dom：一次性操作大量dom-参照长列表渲染和异步渲染
2，进行了复杂度很高的运算(常见于循环)：循环中的操作尽量精简(其实意义不大)
3，vue项目中，不必要的渲染太多： Vue：依赖收集+Vue3的静态节点标记，已经基本上避免了因为数据改变而引起的无意义渲染。
- 循环+动态切换内容+key值
- 频繁切换显影操作用v-show，不用v-if
- Keep-alive 缓存：慎用；页面不更新带来的麻烦比做缓存带来的优化更加麻烦。
数据缓存：不变数据：把定期时效可以缓存在cookies或者localstorage中，比如token，用户名等
Lodash
老版本情况：Lodash 是一个实用工具库，早期版本不支持 Tree - shaking。在使用时，如果只引入了其中的部分方法，打包时会将整个 Lodash 库打包进去，导致打包文件体积较大。例如，若仅使用 _.map 方法，老版本打包会包含整个 Lodash 代码。
javascript
// 老版本 Lodash 使用方式
const _ = require('lodash');
const newArray = _.map([1, 2, 3], item => item * 2);
新版本情况：Lodash 推出了 lodash-es 版本，它采用 ES6 模块语法，支持 Tree - shaking。可以只引入所需的方法，打包时只会包含这些方法的代码。
