必须先确认图片“真无用”再清理，因现代页面图片引用分散于html（img/srcset/source/picture/data-*）、css（url()/background-image等）和js（动态拼接）中；静态扫描仅初筛，需结合构建产物或运行时network请求验证，且清理须基于git diff人工确认。
直接删掉没被引用的图片文件是危险操作，极大概率会漏掉 CSS background-image、JS 动态插入、srcset 中的路径，或被 picture 元素包裹的备用图。必须先确认“真无用”，再清理。
怎么找出 HTML/CSS/JS 中所有图片引用路径
光扫 <img src="..."> 不够，现代页面图片来源分散：
-
<img src="...">、<img srcset="...">、<source srcset="..."></source>（含picture内部） - CSS 文件里的
url(...)，包括内联style和外部.css，注意background-image、list-style-image、border-image - JS 中字符串拼接的路径，如
el.src = 'images/' + name + '.png'—— 这类无法静态分析，需人工核对或运行时抓取 - HTML 中可能存在的
data-src、data-bg等自定义懒加载属性（尤其在 Vue/React 组件模板里）
推荐组合工具：用 grep -r "src=\|url(" ./src 快速扫描，再用浏览器 DevTools 的 Network → Media 面板刷新页面，看哪些图片实际被加载了；未出现的才值得进一步排查。
为什么不能只靠文件名匹配来判断“无用”
文件名相同 ≠ 被引用，文件名不同 ≠ 未被引用。常见陷阱：
- 构建工具（如 Webpack/Vite）可能重命名图片并生成哈希，原始文件名在源码中根本不存在，但构建后仍被引用
- CSS 中写的是
url(../assets/icons/arrow.svg)，而你本地文件叫arrow-2024.svg，但构建时被别名 alias 成前者 - 某些 CMS 或低代码平台把图片存进数据库，前端通过 API 返回 URL，这类路径根本不在项目代码里
-
srcset里有logo@2x.png 2x，但你只搜logo.png就会漏掉
结论：静态扫描只能作为初筛，最终判断必须结合构建产物（dist 目录）中的实际资源调用链，或上线后用 Lighthouse 的 “Unused JavaScript and CSS” 类思路反推（虽不直接支持图片，但可观察 Network 请求缺失）。
自动化清理前必须守住的两条线
盲目跑脚本删图，轻则页面白屏，重则破坏 CI/CD 流程。务必做到：
- 所有图片资源必须纳入 Git 版本控制 —— 如果某张图只在设计师本地硬盘，却出现在代码里，那它本身就是不可部署的“幽灵资源”
- 清理动作必须基于 diff：先用脚本生成“疑似无用列表”，人工确认后，再执行
git rm，而非直接rm。这样即使误删，也能立刻git checkout恢复 - 若项目用了 Asset Catalog（如 iOS/macOS）、或构建时启用了
image-minimizer-webpack-plugin等压缩插件，它们可能自动剔除未引用图，此时手动删反而干扰构建逻辑
真正难的不是技术手段，而是厘清“谁在什么时候、以什么形式引用了哪张图”。一张图出现在 3 个地方：CSS 里当背景、JS 里做 fallback、HTML 里作主图 —— 少查一个，就等于埋了个线上 bug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
