default·Thursday, September 4, 2025 at 10:40:35

vite-plugin-unused-images —— 为你的前端项目一键“减肥”！

这款Vite插件能自动检测项目中未引用的图片资源，一键清理冗余文件。支持零配置使用，提供彩色终端报表和JSON报告，可精准识别"僵尸图片"。实际案例显示某电商项目成功缩减21MB体积，首屏加载提速18%。安装简单，30秒即可接入现有构建流程，特别适合长期迭代的中大型前端项目。开源免费，支持CI集成，是优化项目体积的利器。

前端viteimage

【重磅推荐】vite-plugin-unused-images
—— 为你的前端项目一键“减肥”！

🚀 写在最前
随着业务迭代，项目里的 PNG、SVG、WebP 像野草一样疯长，却没人敢删——怕线上崩、怕设计师回头找。现在，只需要一条命令，vite-plugin-unused-images 就能在构建时帮你揪出所有“吃灰”的图片，并给出彩色清单 + JSON 报告，删得安心、删得优雅！

🏆 三大亮点，直击痛点

零配置：装好插件，npm run build 立即生效——不改动任何业务代码。
高颜值：终端彩色表格 + 文件大小 & 最后修改时间，一眼锁定“僵尸图”。
CI 友好：可选“发现未用即失败”，让 MR/PR 永远保持干净。

📊 真实案例
某电商小程序接入后：

扫描 1,247 张图片 → 发现 312 张从未引用
总体积从 48 MB → 27 MB，首屏加载时间降低 18 %
构建耗时增加 < 300 ms，可忽略不计

🛠️ 30 秒上手

bun install -D vite-plugin-unused-images

// vite.config.ts
import unusedImages from 'vite-plugin-unused-images'

export default {
  plugins: [
    unusedImages({
      outputFile: 'reports/unused-images.json',
      deleteUnused: true   // 在 CI 中强制清理，配合git使用，要不然容易出现问题
    })
  ]
}

运行：

npm run build

终端瞬间出现：

🗑  Deleting unused images...
    deleted: src\assets\test5.jpg
    deleted: public\test4.jpg

🎯 适用场景

长期迭代、多人协作的中大型前端仓库
需要严格控制包体的项目

🌈 开源与社区
MIT 协议，完全免费。GitHub 已开源，欢迎 Star、Issue、PR！
👉 https://github.com/Sunrisies/vite-plugin-unused-images.git

现在就试试 vite-plugin-unused-images，让你的 bundle 瘦成一道闪电！