Vite 如何优化项目的图片体积
一、前言
在前端工程化中，图片优化是提升项目性能的重要环节之一，也是提升性能的关键步骤。vite-plugin-imagemin提供了丰富的配置选项，支持 GIF、PNG、JPG、SVG 等格式的压缩。本文将详细介绍该插件的完整配置及各参数的作用。告诉大家如何在 Vite 中使用vite-plugin-imagemin对图片进行高效压缩，减少加载时间，提高用户体验。
二、安装vite-plugin-imagemin
在 Vite 项目中，使用vite-plugin-imagemin进行图片压缩。首先安装插件：
# 写这篇文章的时候，版本是 0.6.1 pnpm add vite-plugin-imagemin -D三、配置vite.config.ts
在vite.config.ts中配置vite-plugin-imagemin，同时判断当前环境是否是生产模式：
import { defineConfig } from 'vite' import viteImagemin from 'vite-plugin-imagemin' export default defineConfig(({ command }) => { const isBuild = command === 'build' // 是否为生产模式 return { plugins: [ viteImagemin({ gifsicle: { interlaced: true, // 隔行扫描 optimizationLevel: 3, // 压缩级别（0-3） }, optipng: { optimizationLevel: 5, // 压缩级别（0-7），值越大压缩率越高 }, mozjpeg: { quality: 80, // 压缩质量（0-100） progressive: true, // 渐进式加载 smooth: 2, // 平滑处理，减少色彩失真 }, svgo: { plugins: [ { name: 'removeViewBox', active: false }, // 保留 viewBox 以防止 SVG 变形 { name: 'removeEmptyAttrs', active: true }, // 移除空属性 { name: 'convertColors', params: { currentColor: true } }, // 颜色转换 ] }, webp: { quality: 80, // WebP 质量（0-100） lossless: false, // 是否无损压缩 method: 6, // 压缩方法（0-6），数值越大，压缩率越高但速度变慢 }, pngquant: { quality: [0.8, 0.9], // PNG 质量范围 speed: 4, // 压缩速度（1-10），数值越大速度越快但压缩率降低 }, disable: !isBuild, // 仅在生产环境启用 /** 是否在控制台输出压缩结果 */ verbose: true, }) ] } })四、参数解析
4.1、gifsicle（GIF 优化）
| 参数 | 作用 | 取值范围 | 推荐值 |
|---|---|---|---|
interlaced | 是否启用隔行扫描 | true/false | true |
optimizationLevel | 压缩级别 | 0-3 | 3 |
4.2、optipng（PNG 优化）
| 参数 | 作用 | 取值范围 | 推荐值 |
|---|---|---|---|
optimizationLevel | 压缩级别 | 0-7 | 5 |
4.3、mozjpeg（JPG 优化）
| 参数 | 作用 | 取值范围 | 推荐值 |
|---|---|---|---|
quality | 质量 | 0-100 | 80 |
progressive | 渐进式加载 | true/false | true |
smooth | 平滑度 | 0-100 | 2 |
4.4、svgo（SVG 优化）
| 参数 | 作用 | 取值范围 | 推荐值 |
|---|---|---|---|
removeViewBox | 保留viewBox防止 SVG 变形 | true/false | false |
removeEmptyAttrs | 移除空属性 | true/false | true |
convertColors | 颜色转换 | { currentColor: true } | { currentColor: true } |
4.5、webp（WebP 优化）
| 参数 | 作用 | 取值范围 | 推荐值 |
|---|---|---|---|
quality | 质量 | 0-100 | 80 |
lossless | 是否无损压缩 | true/false | false |
method | 压缩方法（数值越大，压缩率越高但速度变慢） | 0-6 | 6 |
4.6、pngquant（PNG 量化）
| 参数 | 作用 | 取值范围 | 推荐值 |
|---|---|---|---|
quality | 质量范围 | [min, max](0-1) | [0.6, 0.8] |
speed | 压缩速度，越大速度越快但压缩率降低 | 1-10 | 4 |
4.7、其它配置
| 参数 | 作用 | 取值范围 | 推荐值 |
|---|---|---|---|
svgoOptions.multipass | 多次优化 SVG | true/false | true |
cache | 开启缓存，加快二次构建 | true/false | true |
filter | 过滤文件路径，如跳过node_modules目录 | (source: string) => boolean | !source.includes('node_modules') |
disable | 仅在生产环境启用 | true/false | !isBuild |
五、总结
使用vite-plugin-imagemin，可以实现：
- ✅ 自动化图片压缩，提高页面加载速度
- ✅ 支持 PNG、JPG、GIF、SVG、WebP 多种格式
- ✅ 仅在生产环境启用，开发环境不受影响
- ✅ 结合缓存功能，提高构建速度
希望这篇文章能帮助你更好地优化 Vite 项目的图片资源！🚀