Vite图片压缩与格式转换推荐使用vite-plugin-image-optimizer（Windows/跨平台首选），基于@squoosh/lib纯JS实现，支持PNG/JPEG/GIF压缩及自动转WebP/AVIF；或选vite-plugin-imagemin深度调优压缩算法，但需处理二进制依赖问题。
在 Vite 构建中配置图片压缩与格式转换，核心是选用合适插件并正确设置参数。目前主流方案有两类：一类专注压缩（如 vite-plugin-imagemin），另一类兼顾压缩+现代格式自动转码（如 vite-plugin-image-optimizer）。推荐根据项目环境和目标选择——Windows 开发者优先用后者，避免底层二进制依赖问题；需要精细控制压缩算法的团队可选前者。
使用 vite-plugin-image-optimizer（推荐 Windows / 跨平台）
该插件基于纯 JS 的 @squoosh/lib，无需安装 cwebp、mozjpeg 等本地工具，开箱即用，同时支持 WebP/AVIF 自动转换。
- 安装：
npm install vite-plugin-image-optimizer -D - 在
vite.config.js中添加插件：import { ViteImageOptimizer } from 'vite-plugin-image-optimizer' export default defineConfig({ plugins: [ ViteImageOptimizer({ png: { quality: 80 }, jpeg: { quality: 80 }, webp: { quality: 80, lossless: false }, avif: { quality: 75 }, include: /\.(png|jpe?g|gif|svg)$/i, exclude: /node_modules/ }) ] }) - 构建后，原始图片保留，同时生成同名
.webp或.avif文件，需配合 HTML/CSS 中按条件加载（例如用<picture></picture>标签）
使用 vite-plugin-imagemin（适合深度调优）
底层基于 imagemin 生态，支持更细粒度算法控制（如 pngquant、gifsicle），但国内安装常遇网络问题，需提前处理。
- 安装前建议在
package.json加 resolutions 防止卡住："resolutions": { "bin-wrapper": "npm:bin-wrapper-china" } - 安装：
yarn add vite-plugin-imagemin -D - 基础配置示例：
import viteImagemin from 'vite-plugin-imagemin' viteImagemin({ gifsicle: { optimizationLevel: 7 }, optipng: { optimizationLevel: 7 }, mozjpeg: { quality: 80 }, pngquant: { quality: [0.8, 0.9], speed: 4 }, svgo: { plugins: [ { name: 'removeViewBox' }, { name: 'removeEmptyAttrs', active: false } ] } }) - 注意：它只压缩原图，不生成新格式文件；如需 WebP，得额外配转码逻辑或换用其他插件
手动实现 WebP 双格式输出（轻量定制场景）
若只需 WebP 备份、不依赖第三方插件，可写简易插件在 generateBundle 钩子中复制图片 chunk 并转码：
立即学习“Java免费学习笔记（深入）”；
- 读取原始图片 buffer
- 用
@squoosh/cli或sharp（需 Node 16+）转为 WebP buffer - 构造新 chunk，修改
fileName（如icon.png → icon.webp）并注入bundle - 最终输出目录会同时存在
icon.png和icon.webp
开发环境图片内联阈值调整（避坑关键）
Vite 默认把 ≤4KB 图片在开发时转为 base64，但生产构建才走 assetsInlineLimit。若需开发时也保持文件形式（便于调试懒加载、CDN 等），不能只改 build.assetsInlineLimit。
- 必须自定义插件拦截
transform钩子，对.png/.jpg等资源跳过 base64 编码 - 或临时设
build.assetsInlineLimit: 0（慎用，可能影响 HMR 性能） - 更稳妥做法：用
vite-plugin-image-optimizer的include/exclude过滤小图标，让它们绕过优化流程，保持原始文件行为
