Open yang-xianzhu opened 1 year ago
图片资源的体积往往是项目产物体积的大头，如果能尽可能精简图片的体积，那么对项目整体打包产物体积的优化将会是非常明显的。在 JavaScript 领域有一非常知名的图片压缩库imagemin，作为底层的压缩工具，前端的项目中经常基于它来进行图片压缩，比如 Webpack 中大名鼎鼎的image-webpack-loader。vite 社区当中也有相应的 plugin---vite-plugin-imagemin。
在实际的项目中我们经常会用到各种各样的 svg 图标，虽然 svg 文件一般体积不大，但 Vite 中对于 svg 文件会始终打包成单文件，大量的图标引入之后会导致网络请求的增加，大量的 HTTP 请求会导致网络解析耗时变长，页面加载性能直接受到影响。
HTTP2 的多路复用设计可以解决大量 HTTP 的请求导致的网络加载性能问题，因此雪碧图技术在 HTTP2 并没有明显的优化效果，这个技术更适合在传统的 HTTP1.1 场景下使用(比如本地开发)
不经常变化的数据，多利用缓存， 第二次使用的时候，直接取缓存的。
1. 图片压缩
图片资源的体积往往是项目产物体积的大头，如果能尽可能精简图片的体积，那么对项目整体打包产物体积的优化将会是非常明显的。在 JavaScript 领域有一非常知名的图片压缩库imagemin，作为底层的压缩工具，前端的项目中经常基于它来进行图片压缩，比如 Webpack 中大名鼎鼎的image-webpack-loader。vite 社区当中也有相应的 plugin---vite-plugin-imagemin。
2. 雪碧图优化
在实际的项目中我们经常会用到各种各样的 svg 图标，虽然 svg 文件一般体积不大，但 Vite 中对于 svg 文件会始终打包成单文件，大量的图标引入之后会导致网络请求的增加，大量的 HTTP 请求会导致网络解析耗时变长，页面加载性能直接受到影响。
3. 多利用缓存
不经常变化的数据，多利用缓存， 第二次使用的时候，直接取缓存的。