Vite 如何优化项目的图片体积

一、前言

在前端工程化中,图片优化是提升项目性能的重要环节之一,也是提升性能的关键步骤。vite-plugin-imagemin 提供了丰富的配置选项,支持 GIF、PNG、JPG、SVG 等格式的压缩。本文将详细介绍该插件的完整配置及各参数的作用。告诉大家如何在 Vite 中使用 vite-plugin-imagemin 对图片进行高效压缩,减少加载时间,提高用户体验。

二、安装 vite-plugin-imagemin

在 Vite 项目中,使用 vite-plugin-imagemin 进行图片压缩。首先安装插件:

bash 复制代码
# 写这篇文章的时候,版本是 0.6.1
pnpm add vite-plugin-imagemin -D

三、配置 vite.config.ts

vite.config.ts 中配置 vite-plugin-imagemin,同时判断当前环境是否是生产模式:

ts 复制代码
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 项目的图片资源!🚀

相关推荐
Filotimo_13 小时前
2.CSS3.(3).html
前端·css3
whyfail13 小时前
React v19.2版本
前端·javascript·react.js
慧慧吖@14 小时前
react基础
前端·javascript·react.js
浪裡遊14 小时前
MUI组件库与主题系统全面指南
开发语言·前端·javascript·vue.js·react.js·前端框架·node.js
DiXinWang14 小时前
关闭谷歌浏览器提示“若要接收后续 Google Chrome 更新,您需使用 Windows 10 或更高版本”的方法
前端·chrome
CoderYanger14 小时前
前端基础——HTML练习项目:填写简历信息
前端·css·职场和发展·html
muyouking1114 小时前
深入理解 HTML `<label>` 的 `for` 属性:提升表单可访问性与用户体验
前端·html·ux
IT_陈寒15 小时前
Java性能调优:从GC日志分析到实战优化的5个关键技巧,让你的应用快如闪电!
前端·人工智能·后端
Mintopia15 小时前
🚀 Next.js API 压力测试:一场前端与后端的“极限拉扯”
前端·后端·全栈
Mintopia15 小时前
🛡️ 对抗性攻击与防御:WebAI模型的安全加固技术
前端·javascript·aigc