先扫描所有图片文件，再反向搜索代码中是否出现其文件名（含扩展名），需覆盖多级目录、./public、./content等路径，并注意大小写及动态加载场景，脚本仅标记疑似冗余图片供人工确认，删图后须验证Console 404、CSS background-image和JS动态创建img标签。
怎么快速定位项目里没被引用的图片文件
直接删图前必须确认它真没人用——很多“冗余”其实是动态加载或 CMS 生成路径，盲目清理会导致线上 404。核心思路是：先扫描所有图片文件，再反向搜索代码中是否出现其文件名（含扩展名）。
常见误判点：fs.readdirSync('./images') 只读一级目录，但项目常有 ./images/icons/、./assets/img/ 多级结构；若漏掉子目录，就会把实际在用的图标当成冗余。
- 用
glob或fast-glob替代fs.readdirSync，递归匹配**/*.{png,jpg,jpeg,gif,webp} - 搜索范围不能只限
./src，还要覆盖./public（静态资源）、./content（Markdown 或 CMS 内容）、甚至.env（某些配置写死路径） - 注意大小写：Linux 系统下
Logo.png和logo.png是不同文件，但代码里可能混用，搜索时得加i标志
为什么 grep 或 VS Code 全局搜索会漏掉真实引用
静态文本搜索对三类情况完全失效：接口返回的路径、构建时注入的变量、CDN 拼接字符串。比如 src={`${CDN_URL}/icons/${iconName}.svg`}，iconName 是运行时值，文件名根本不出现在源码里。
这类图片无法靠脚本自动识别，必须人工核对业务逻辑或日志。否则一删，用户点击按钮时图标就变成占位符。
立即学习“前端免费学习笔记（深入）”；
- 检查所有 API 响应结构，尤其是返回
image_url、avatar、cover字段的接口 - 搜
import.meta.env、process.env、__PUBLIC_PATH__等构建变量，看是否参与图片路径拼接 - 打开浏览器 Network 面板，筛选
Img，观察页面交互后加载了哪些图片 URL —— 这些才是真实在用的
如何用脚本自动化标记疑似冗余图片
下面这个 Node.js 脚本能输出「未被静态匹配」的图片列表，不删除，只标记，留给你二次确认：
const glob = require('fast-glob');
const fs = require('fs').promises;
async function findUnusedImages() {
const imageFiles = await glob(['./images/**/*.{png,jpg,jpeg,gif,webp}'], {
caseSensitiveMatch: false
});
const allCode = await fs.readFile('./src/index.tsx', 'utf8'); // 示例入口文件
const used = new Set();
imageFiles.forEach(file => {
const basename = file.split('/').pop();
if (allCode.includes(basename)) used.add(basename);
});
imageFiles.forEach(file => {
if (!used.has(file.split('/').pop())) {
console.log('<code>UNUSED</code>', file); // 输出带标识，方便复制粘贴进编辑器跳转
}
});
}
findUnusedImages();
关键细节：basename 提取要精确到文件名+扩展名，避免 icon.png 匹配到 icon.png?v=123 却漏掉 icon@2x.png；输出用 <code>UNUSED 包裹，VS Code 点击可直接跳转到该行。
删图后必须验证的三个地方
删完不是结束，而是验证开始。很多团队删图后没测，上线才发现某处 404 导致功能异常，因为图片被用作背景、伪元素或 JS new Image() 预加载。
- 本地启动服务，打开 DevTools → Console，刷新页面，扫一眼有没有
GET http://localhost:3000/images/xxx.png 404 - 在 Elements 面板里 Ctrl+F 搜
background-image，点开每个匹配项，看 computed 的 background-image URL 是否还存在 - 全局搜
new Image()、Image.prototype.src、document.createElement('img')，确认这些动态创建的img标签没指向已删文件
最易忽略的是 CSS 中的 url() 引用和 JS 里字符串拼接路径——它们不会出现在 HTML 的 src 属性里，但一样会触发 HTTP 请求。
