重要提示 ：原主流插件
vite-plugin-imagemin已不兼容 Vite5，会导致构建失败。本文整理了 4 种适用于 Vite5 及以下版本的图片压缩方案，涵盖插件化与自定义脚本，兼顾易用性与灵活性。
方法 1：vite-plugin-image-optimizer（推荐 Windows 环境）
支持 Vite >=3 和 Node >=14
核心特性
- 技术底层 ：基于 Google 开源的
@squoosh/lib，纯 JavaScript 实现，无二进制依赖（彻底避免 Windows 环境下的底层工具安装失败问题）。 - 核心能力：支持 PNG/JPG/GIF 压缩，同时可自动转换为 WebP/AVIF 等现代图片格式（体积比传统格式小 30%-50%）。
- 优势：安装零门槛、跨平台兼容性强，支持按文件类型配置压缩参数，且可自定义过滤文件（如排除小图）。
步骤 1：安装依赖
bash
arduino
# npm
npm install vite-plugin-image-optimizer --save-dev
# yarn/pnpm
yarn add vite-plugin-image-optimizer -D
pnpm add vite-plugin-image-optimizer -D步骤 2：Vite 配置（vite.config.js）
javascript
运行
php
import { defineConfig } from 'vite';
import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';
export default defineConfig({
plugins: [
ViteImageOptimizer({
png: {
quality: 80 // 质量（0-100，值越高越清晰，体积越大）
},
jpeg: { quality: 80 },
webp: {
quality: 80,
lossless: false
},
avif: { quality: 75 }, // AVIF 压缩率比 WebP 更高，但兼容性稍弱
include: /\.(png|jpe?g|svg)$/i, // 仅处理指定格式
exclude: /node_modules/ // 排除 node_modules 目录
}),
],
});关键注意事项
- 若需在开发环境预览压缩效果，可将
disable设为false，但会略微影响热更新速度。 preserveOriginalFormat: true会同时保留原格式（如 PNG）和转换后的现代格式（如 WebP），需在代码中通过<picture>标签实现降级兼容（示例见「通用注意事项」）。
方法 2：rollup-plugin-imagemin（兼容 Rollup 生态）
核心特性
- 技术底层 ：Rollup 官方生态插件，Vite 基于 Rollup 构建，可直接复用，支持所有 imagemin 生态插件 （如
imagemin-webp、imagemin-avif）。 - 优势：生态成熟、配置灵活，可精细控制每种图片格式的压缩逻辑，适合需要深度定制的场景。
- 不足 ：依赖
imagemin系列二进制插件，Windows 环境需确保已安装libpng等底层库（可通过npm install --global windows-build-tools补装）。
步骤 1：安装依赖
需同时安装核心插件和对应图片格式的压缩插件：
bash
sql
# 核心插件 + 常用格式压缩插件
npm install rollup-plugin-imagemin imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-webp imagemin-avif --save-dev步骤 2：Vite 配置（vite.config.js）
javascript
运行
javascript
import { defineConfig } from 'vite';
import imagemin from 'rollup-plugin-imagemin';
export default defineConfig({
plugins: [
imagemin({
// 压缩插件集合（按格式配置）
plugins: [
// GIF 压缩：optimizationLevel 1-3（3 最优）
imagemin.gifsicle({ optimizationLevel: 3 }),
// JPEG 压缩：quality 0-100，progressive 启用渐进式加载
imagemin.mozjpeg({ quality: 80, progressive: true }),
// PNG 压缩：quality [最小质量, 最大质量]，speed 压缩速度（1-11，1 最慢最优）
imagemin.pngquant({ quality: [0.7, 0.8], speed: 4 }),
// 自动转换 PNG/JPG 为 WebP
imagemin.webp({ quality: 80 }),
// 自动转换为 AVIF（压缩率更高）
imagemin.avif({ quality: 75 }),
],
// 高级配置：过滤文件
include: /.(png|jpe?g|gif)$/i,
exclude: /public/icons/, // 排除无需压缩的目录（如小图标）
}),
],
});关键注意事项
- 若安装时出现「二进制依赖缺失」错误（如
pngquant安装失败），Windows 用户可参考 imagemin 官方文档 安装依赖库，Mac 用户可通过brew install libpng补装。 - 该插件仅在 构建阶段 生效，开发环境不处理图片（不影响开发速度）。
方法 3：vite-plugin-compress（一站式资源压缩）
核心特性
- 核心用途 ：主要用于压缩 JS/CSS/HTML 等代码资源，附带图片压缩功能 （基于
imagemin）。 - 优势：无需安装多个插件，可同时处理代码和图片压缩，适合追求「轻依赖」的小型项目。
- 不足：图片压缩功能为附加能力，不支持现代格式（WebP/AVIF）转换，仅支持传统格式（PNG/JPG/GIF）压缩。
步骤 1：安装依赖
bash
css
npm install vite-plugin-compress --save-dev步骤 2：Vite 配置（vite.config.js）
javascript
运行
php
import { defineConfig } from 'vite';
import compress from 'vite-plugin-compress';
export default defineConfig({
plugins: [
compress({
// 1. 启用图片压缩（默认 false，需手动开启）
image: true,
// 2. 图片压缩参数（仅支持传统格式）
imageOptions: {
mozjpeg: { quality: 80 }, // JPEG 压缩
pngquant: { quality: [0.7, 0.8] }, // PNG 压缩
gifsicle: { optimizationLevel: 3 }, // GIF 压缩
},
// 3. 代码压缩配置（插件核心能力，可选）
gzip: true, // 启用 GZIP 压缩 JS/CSS
brotli: true, // 启用 Brotli 压缩（比 GZIP 压缩率更高）
}),
],
});关键注意事项
- 若仅需图片压缩，不建议使用此插件（功能不如专门的图片插件全面）；若需同时压缩代码和图片，可优先选择。
- 图片压缩仅支持「压缩体积」，不支持格式转换，需现代格式时需搭配其他工具。
方法 4：自定义脚本（手动控制压缩逻辑）
核心特性
- 实现方式 ：通过 Vite 的
build.onEnd钩子，在构建完成后调用imagemin核心库手动处理图片。 - 优势：完全自定义压缩时机、压缩目录和参数，适合插件配置频繁出问题或有特殊需求的场景（如仅压缩特定目录的图片）。
- 不足：需手动编写逻辑，不支持开发环境预览，仅在构建后生效。
步骤 1：安装依赖
bash
arduino
# imagemin 核心库 + 常用格式压缩插件
npm install imagemin imagemin-pngquant imagemin-mozjpeg imagemin-gifsicle --save-dev步骤 2：Vite 配置（vite.config.js）
javascript
运行
javascript
import { defineConfig } from 'vite';
import imagemin from 'imagemin';
import imageminPngquant from 'imagemin-pngquant';
import imageminMozjpeg from 'imagemin-mozjpeg';
import imageminGifsicle from 'imagemin-gifsicle';
import { resolve } from 'path'; // 路径处理工具
export default defineConfig({
build: {
// 构建完成后执行图片压缩（异步钩子）
async onEnd() {
try {
// 1. 配置需要压缩的图片路径（glob 语法）
const inputDir = resolve(__dirname, 'dist/assets/**/*.{png,jpg,jpeg,gif}');
// 2. 压缩后的输出目录（此处与输入目录一致，即覆盖原文件）
const outputDir = resolve(__dirname, 'dist/assets');
// 3. 执行压缩
await imagemin([inputDir], {
destination: outputDir,
plugins: [
imageminPngquant({ quality: [0.7, 0.8] }),
imageminMozjpeg({ quality: 80 }),
imageminGifsicle({ optimizationLevel: 3 }),
],
});
console.log('✅ 图片压缩完成！');
} catch (error) {
console.error('❌ 图片压缩失败：', error);
}
},
},
});关键注意事项
- 若不想覆盖原文件，可将
outputDir设为其他目录（如dist/assets/compressed），但需同步修改代码中图片的引用路径。 - 建议在
try/catch中包裹逻辑，避免压缩失败导致整个构建流程中断。
通用注意事项（避坑指南）
-
压缩质量的平衡
质量参数（如
quality: 80）并非越高越好：过高会导致体积过大，过低会导致失真。建议根据场景调整：- 产品图 / 封面图：
quality: 80-90（优先保证清晰度）； - 图标 / 背景图：
quality: 60-70（优先控制体积）。
- 产品图 / 封面图：
-
现代格式（WebP/AVIF）的兼容方案
现代格式体积小，但部分旧浏览器（如 IE）不支持，需通过
<picture>标签实现降级：html
预览
xml<picture> <!-- 优先加载 AVIF --> <source srcset="image.avif" type="image/avif"> <!-- 其次加载 WebP --> <source srcset="image.webp" type="image/webp"> <!-- 降级加载 PNG/JPG --> <img src="image.png" alt="示例图片"> </picture> -
开发环境不建议压缩
图片压缩会消耗 CPU 资源，导致热更新速度变慢。所有插件默认在开发环境禁用压缩，若需预览效果，可临时开启（但不推荐长期使用）。
-
路径问题排查
压缩后若图片加载失败，需检查：
- 插件的
include/exclude配置是否误过滤了图片目录； - 自定义脚本的
inputDir路径是否正确（可通过console.log(inputDir)打印验证）。
- 插件的
场景化选择建议
| 项目场景 | 推荐方案 | 核心原因 |
|---|---|---|
| Windows 环境、新手用户 | vite-plugin-image-optimizer |
无二进制依赖，安装简单，支持现代格式转换 |
| 中大型项目、需深度定制 | rollup-plugin-imagemin |
生态成熟，可灵活扩展 imagemin 插件 |
| 小型项目、需压缩代码 + 图片 | vite-plugin-compress |
轻依赖，一站式处理所有静态资源压缩 |
| 特殊需求（如自定义压缩时机） | 自定义脚本（imagemin + build.onEnd） |
完全手动控制，避免插件配置冲突 |
所有方案的核心压缩能力均基于 imagemin 或 squoosh，最终压缩效果差异极小，选择时优先考虑 兼容性、易用性 与项目实际需求即可。
编辑分享
展开介绍一下vite-plugin-image-optimizer的安装依赖步骤
详细说明vite-plugin-compress在图片压缩方面的具体配置
有哪些其他的Vite插件可用于图片压缩？