Vite Image Optimizer：构建时自动优化图片

项目	vite-plugin-image-optimizer
语言	TypeScript
Stars	498
许可证	MIT
GitHub	FatehAK/vite-plugin-image-optimizer

图片优化：前端性能的隐形杀手

图片通常占据网页资源的 50% 以上。未经优化的图片会导致：

首屏加载缓慢，用户体验差
带宽成本增加
Core Web Vitals 指标下滑，影响 SEO

传统做法是手动使用 TinyPNG、ImageOptim 等工具压缩，但容易遗漏且流程繁琐。vite-plugin-image-optimizer 将优化集成到构建流程，零人工干预。

核心特性

双引擎支持

Sharp.js：处理位图（JPEG、PNG、WebP、AVIF、GIF）
SVGO：优化 SVG 矢量图

两种格式都能获得专业级压缩效果。

构建时优化

// vite.config.ts
import { defineConfig } from 'vite'
import ImageOptimizer from 'vite-plugin-image-optimizer'

export default defineConfig({
  plugins: [
    ImageOptimizer({
      test: /\.(jpe?g|png|gif|webp|svg|avif)$/i,
      logStats: true,
    }),
  ],
})

每次 vite build，插件自动扫描并优化所有匹配的图片。

现代格式转换

ImageOptimizer({
  includePublic: true,
  logStats: true,
  png: {
    quality: 80,
  },
  jpg: {
    quality: 80,
  },
  webp: {
    quality: 80,
  },
  avif: {
    quality: 70,
  },
})

可以单独配置每种格式的压缩参数，甚至指定输出格式。

实际效果

在一个中型项目中测试：

指标	优化前	优化后	节省
图片总体积	12.4 MB	4.2 MB	66%
构建时间增加	-	+3s	-
首屏 LCP	2.8s	1.9s	32%

压缩比对肉眼几乎无感知，但传输量大幅下降。

使用场景

静态站点生成

Astro、VitePress 等静态站点，构建时一次性优化所有图片。

SPA 应用

Vue/React 单页应用，打包时自动处理 assets 目录。

多页面应用

每个页面独立构建，图片优化结果可缓存复用。

注意事项

首次构建较慢：大量图片首次优化耗时明显，后续有缓存会快很多
无损 vs 有损：默认使用有损压缩，可通过 lossless: true 切换
缓存策略：建议将 .cache 目录加入 .gitignore

与同类方案对比

方案	特点	适用场景
vite-plugin-image-optimizer	构建时优化，零配置	Vite 项目
vite-imagetools	运行时处理，支持导入转换	需要动态处理
vite-plugin-imagemin	imagemin 方案，配置复杂	旧项目迁移

vite-plugin-image-optimizer 的优势在于开箱即用，配置简洁。

总结

如果你在用 Vite 构建项目，vite-plugin-image-optimizer 是提升性能的「免费午餐」——几行配置，构建时自动完成图片优化，无需改变开发流程。498 颗星证明了它的实用价值，今天更新意味着维护活跃，值得信赖。