vite需借助插件实现图片压缩与转码：用vite-plugin-imagemin构建时压缩png/jpg等，用vite-plugin-webp或vite-plugin-responsive-picture生成webp/avif，并通过标签按浏览器支持智能加载。
Vite 本身不内置图片压缩与转码功能，需借助插件实现。核心思路是：构建时（build 阶段）用插件处理静态资源（如 .png、.jpg），自动压缩、生成 WebP/AVIF 等现代格式，并在运行时按浏览器支持智能加载。
使用 vite-plugin-imagemin 实现构建时压缩
这是最常用的图片压缩插件，基于 imagemin 生态，支持 PNG/JPG/GIF/SVG 压缩。
- 安装：
npm install -D vite-plugin-imagemin - 配置
vite.config.ts：
import { defineConfig } from 'vite'
import imagemin from 'vite-plugin-imagemin'
export default defineConfig({
plugins: [
imagemin({
gifsicle: { optimizationLevel: 3 },
jpegtran: { progressive: true },
optipng: { optimizationLevel: 7 },
svgo: {
plugins: [
{ name: 'removeViewBox', active: false },
{ name: 'addClassesToSVGElement', active: true }
]
}
})
]
})
✅ 构建后，public/ 或 src/assets/ 中的图片会被原地压缩（覆盖或输出到 dist/），不改变引用路径。
用 vite-plugin-webp 或自定义逻辑生成 WebP/AVIF
Vite 不自动转码格式，需额外插件或脚本生成多格式副本，并配合 HTML/JS 智能加载。
- 推荐插件：
vite-plugin-webp（简单生成 WebP）或vite-plugin-responsive-picture（生成 srcset） - 安装并配置示例（WebP）：
npm install -D vite-plugin-webp
import webp from 'vite-plugin-webp'
plugins: [
webp({
// 转换 src/assets 下所有 .png/.jpg
include: [/\.png$/, /\.jpg$/],
// 输出质量（0–100）
quality: 80,
// 是否删除原图（谨慎设为 true）
deleteOriginal: false
})
]
⚠️ 注意：该插件会在 dist/ 中生成 xxx.png.webp，需手动在组件中用 <picture></picture> 切换格式。
前端按需加载：用 + 实现格式降级
光有文件不够，得让浏览器选最优格式。推荐在组件中这样写：
<picture><source srcset="/logo.webp" type="image/webp"></source><source srcset="/logo.avif" type="image/avif"></source> @@##@@ </picture>
✅ 构建前确保 WebP/AVIF 文件已存在（由插件生成），Vite 会自动哈希并处理路径；type 属性决定浏览器是否选用该源。
进阶：构建后自动转码 + 重写引用（可选）
若想全自动（无需手写 <picture></picture>），可用 vite-plugin-responsive-picture 或自定义 Rollup 插件：
- 它扫描
<img src="/logo.png" alt="Logo">，自动生成 WebP/AVIF，注入<picture></picture>并替换原标签 - 适合内容型站点，但会增加构建时间，且对动态
src字符串无效（如:src="xxx"）
配置示例：
import responsive from 'vite-plugin-responsive-picture'
plugins: [
responsive({
formats: ['webp', 'avif'],
quality: 85
})
]
✅ 构建后，所有静态 <img src="xxx.jpg"> 标签将被增强为响应式多格式加载。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
