优化背景
根据业务需求，我进行了一个大屏的开发，这个大屏需要加载地图文件，通过script的方式引入地图的文件库，同时大屏上还有很多图片需要加载，本地调试的时候是正常的，但是放到线上环境，发现在没缓存的情况下，图片会太大，会影响JS的导入，导致地图加载报错，基于这个背景，我做了性能的优化。
问题排查
这个问题是运维人员发现的，他发现在无痕模式，会有页面出不来的问题，我通过调试工具，发现是地图加载报错，然后通过打断点，发现地图请求的时间就10S，而这个地图文件是8M，在没缓存的情况下，这个文件加载到了10S的时候也就5M左右，在有缓存的情况下，能达到8M，本来时间是够的，但是由于大屏上面有一个10M的图片要一起加载，就会导致加载不完成，从而报错。 总结了一下，性能问题主要存在以下几个方面：
- 地图文件加载时间太短，对网络要求高，容易加载的时间不够
- 图片没压缩，图片太大，占用网络并且加载时间太长
解决方案
根据上面存在的问题，我主要做了以下的解决方案：
- 修改地图文件加载超时的时间，从10S改成20S
- 对图片、视频、css等文件进行压缩
对于第二点解决方案,并且基于vite,我找了几个常用的压缩方案
- vite-plugin-minipic：图片压缩方案
- vite-plugin-compression2：其他文件的压缩方案
具体的配置如下
js
plugins: [
vue(),
WindiCSS(),
AutoImport({
resolvers: [ElementPlusResolver()]
}),
Components({
resolvers: [ElementPlusResolver()]
}),
minipic(),
// 就是使用这个插件实现的文件压缩
compression({
threshold: 2000, // 设置只有超过 2k 的文件才执行压缩
deleteOriginalAssets: false, // 设置是否删除原文件
skipIfLargerOrEqual: true // 如果压缩后的文件大小与原文件大小一致或者更大时，不进行压缩
// 其他的属性暂不需要配置，使用默认即可
})
]性能优化衍生
除了压缩图片，当然还有一些老生常谈的优化方案，具体哪些方案适合当前的项目，还是要从具体的项目出发。还有如下几个常用的性能优化方案：
- 代码优化：防抖、节流、虚拟列表、懒加载、按需加载、经常调整和重构代码等
- 浏览器相关优化：减少重构、重排、HTTP优化等
- 文件优化：压缩文件、合并文件等
性能评估标准
对于性能的优化效果，也有一些评估标准：
- 首屏时间：
FP(first-paint)，从页面加载开始到第一个像素绘制到屏幕上的时间。其实把 FP 理解成白屏时间也是没问题的。 - 白屏时间：
FCP(first-contentful-paint)，从页面加载开始到页面内容的任何部分在屏幕上完成渲染的时间。对于该指标，"内容"指的是文本、图像（包括背景图像）、<svg>元素或非白色的<canvas>元素。 - 响应时间：
- 渲染时间：
LCP(largest-contentful-paint)，从页面加载开始到最大文本块或图像元素在屏幕上完成渲染的时间。LCP 指标会根据页面首次开始加载的时间点来报告可视区域内可见的最大图像或文本块完成渲染的相对时间。 - 交互响应时间：点击页面发生交互，从点击开始到事件的响应时间。
总结
通过解决大屏的BUG，让我重新学习了性能优化方案，以及性能评估标准。