vite 项目需借助第三方插件实现图片压缩优化，推荐使用 vite-plugin-imagemin 在构建时压缩 jpeg、png、gif、svg、webp 等格式，且仅生产环境生效；public 目录图片不参与处理，应置于 src/assets 下。
在 Vite 项目中，图片自动压缩与优化不能靠 Vite 自身完成，需借助第三方插件。核心思路是：构建时（build 阶段）对静态资源中的图片进行压缩处理，并替换为更小体积的版本，同时保留原始引用路径逻辑不变。
使用 vite-plugin-imagemin 实现基础压缩
这是目前最常用、配置简洁的方案，底层基于 imagemin，支持 JPEG、PNG、GIF、SVG、WebP 等格式。
- 安装插件：
npm install vite-plugin-imagemin --save-dev - 在
vite.config.ts中引入并配置：
import { defineConfig } from 'vite';
import imagemin from 'vite-plugin-imagemin';
export default defineConfig({
plugins: [
imagemin({
gifsicle: { optimizationLevel: 3 },
optipng: { optimizationLevel: 7 },
mozjpeg: { quality: 80 },
pngquant: { quality: [0.6, 0.8], speed: 4 },
svgo: { plugins: [{ name: 'removeViewBox', active: false }] }
})
]
});
注意：插件默认只在生产构建（vite build）时生效，开发环境不压缩，不影响热更新体验。
配合 vite-plugin-responsive-canvas 或手动处理响应式图片
单纯压缩单张图不够，现代页面还需适配不同设备。Vite 本身不提供 srcset 生成能力，可结合以下方式：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 用
<picture></picture>+srcset手动写多尺寸图片（适合关键 banner 图） - 搭配
vite-plugin-responsive-canvas（适用于 Canvas 渲染图）或自定义脚本批量生成缩略图 - 更推荐：构建前用 Node 脚本调用
sharp生成@2x/webp版本，再通过别名或环境变量控制加载逻辑
启用 WebP 自动转码与回退支持
WebP 比 PNG/JPEG 平均小 30%，但需兼容性兜底。可通过以下方式实现：
- 用
vite-plugin-imagemin的webp选项开启转换（需额外安装imagemin-webp） - 在 HTML 中用
<picture></picture>标签优先加载 WebP，降级到原格式：
<picture><source srcset="/logo.webp" type="image/webp"> @@##@@ </source></picture>
Vite 不会自动重写 <img src="/logo.png" alt="logo"> 为 <picture></picture>，这部分需手动编写或借助构建时模板工具（如 vite-plugin-html 注入逻辑）。
进阶：自定义插件实现按需压缩 + CDN 上传
若需对接阿里云 OSS、Cloudflare Images 等，可编写简易插件，在 generateBundle 钩子中捕获图片资源，压缩后上传并替换引用路径：
- 监听
buildEnd或generateBundle钩子，筛选出.png/.jpg文件 - 用
sharp或imagemin压缩，生成新 Buffer - 调用 CDN SDK 上传，并修改
bundle中对应资源的fileName和source - 注意：需同时更新 HTML/CSS/JS 中的引用路径（较复杂，建议仅用于中大型项目）
不复杂但容易忽略：所有图片压缩插件都依赖构建时的文件读取，因此 public/ 目录下的图片不会被处理（Vite 直接复制），应放在 src/assets/ 下走模块解析流程。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
