项目完成后， 开始着手优化，发现用到的图片很多， 小图标，和一些背景图等等，总结下我用到vite优化方案
小图片的优化
图片转 base64 编码的阈值。为防止过多的 http 请求，Vite 会将 (4 KiB)小于此阈值的图片转为 base64 格式，可根据实际需求进行调整。
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
build: {
assetsInlineLimit: 4096 // 图片转 base64 编码的阈值
}
})
图标 icon
使用svg 作为图标
SVG的优点：
1.矢量图形缩放不会失真(像素点数量不变而导致图像出现模糊、锯齿等)，而光栅图形(PNG、JPG)缩放会导致失真。
矢量图形：基于矢量的点、线、形状和数学公式来构建的图形，该图形是没有像素的，放大缩小不会失真。
光栅图形：由像素点构建的图像—微小的彩色方块，大量像素点可以形成高清图像，比如照片。图像像素越多，质量越高。
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG图像中的文本是可选的，同时也是可搜索的，且可以与 JavaScript 技术一起运行
vite 中 使用 vite-plugin-svg-icons 插件配置完成，然后封装个svgIcon 组件就可以愉快的使用了~
<template>
<svg
aria-hidden="true"
:class="svgClass"
v-bind="$attrs"
:style="{ color: color, fill: color, width: iconSize.width, height: iconSize.height }"
>
<use :xlink:href="iconName"></use>
</svg>
</template>
<SvgIcon name="auth" color="#FF755F" size="60" />
背景图和img 图片
- 懒加载
目前有两种方法，传统的scroll事件触发和最新的Intersection Observer, 懒加载背景图可以先让元素隐藏或是不设置图片，等到了可视区在加载
因为项目用的vant 我这就vant 带的懒加载指令了
<div class="bg-1">
<van-image src="xxx" lazy-load />
</div>
</div>
- fetchproirity API
新的 fetchproirity API 允许我们自定义标记资源的优先级。只需将 fetchprority 属性添加到我们的图像或预加载 LCP 元素中，就可以使浏览器更早地开始下载它们，并具有更高的优先级，这可以对 LCP 时间产生很大的影响。这个 API 已经在基于 chromium 的浏览器中提供，Safari 和 Firefox 也正在实现相关代码，并且这个属性是渐进式的，在不支持它的其他浏览器中会被简单地忽略。
fetchproirity MDN
<img src="" alt="" fetchpriority="high">
表示其获取优先级相对其他图像要高。
<img src="" alt="" fetchpriority="low">
表示其获取优先级相对其他图像要低。
<img src="" alt="" fetchpriority="auto">
默认值：表示自动确定其相对其他图像的获取优先级。
- 使用CDN
（1）尽可能地将内容服务器设置为地理位置更靠近用户的位置来减少用户与服务器之间的距离；
（2）对内容进行缓存，以便最近请求的内容可以快速再次提供。内容分发网络（CDN）是执行这两个操作的最佳方法。CDN 是一组全球分布式的服务器，它作为用户的连接点。由于最后一英里的传输速度往往是最慢的，而使用 CDN 可以尽可能的优化这个问题。
CDN 还允许在这些边缘节点上缓存内容，从而进一步降低加载时间，所以即使必须要返回到我们的源服务器进行回源加载，CDN 通常也可以更快地完成。
- content-visibility 避免大型渲染更新
content-visibility是CSS新增的属性，主要用来提高页面渲染性能，它可以控制一个元素是否渲染其内容，并且允许浏览器跳过这些元素的布局与渲染。
content-visibility: auto 跳过渲染工作
我们仔细想想，页面上虽然会有很多元素，但是它们会同时呈现在用户眼前吗，很显然是不会的，用户每次能够真实看到就只有设备可见区那些内容，对于非可见区的内容只要页面不发生滚动，用户就永远看不到。虽然用户看不到，但浏览器却会实实在在的去渲染，以至于浪费大量的性能。所以我们得想办法让浏览器不渲染非可视区的内容就能够达到提高页面渲染性能的效果。
我们上面说到的虚拟列表原理其实就跟这个类似，在首屏加载时，只加载可视区的内容，当页面发生滚动时，动态通过计算获得可视区的内容，并将非可视区的内容进行删除，这样就能够大大提高长列表的渲染性能。
但这个需要配合JS才能实现，现在我们可以使用CSS中content-visibility: auto，它可以用来跳过屏幕外的内容渲染，对于这种有大量离屏内容的长列表，可以大大减少页面渲染时间
总结
后续还有很多优化的手段，包括占位图片的使用来提升用户体验，还有图片的压缩等，以后实践中慢慢补充。
网友评论