如何查找并清理React应用public文件夹中未使用的图片

注意：首先需要确认你的项目是否存在动态拼接图片路径的逻辑（例如/images/${type}.png），这类动态引用的图片无法通过静态扫描识别，需要先梳理出对应资源范围，避免后续误删。

方法1：自定义Node脚本扫描（无额外依赖，灵活度高） #

思路是先遍历public文件夹拿到所有图片的相对路径，再全局扫描项目所有代码、模板、样式文件，匹配不到引用记录的即为未使用图片，脚本内容如下：

const fs = require('fs')
const path = require('path')

// 配置项可根据自身项目调整
const config = {
  publicDir: path.join(__dirname, 'public'),
  srcDir: path.join(__dirname, 'src'),
  // 需要识别的图片后缀
  imageExtensions: ['.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp'],
  // 需要扫描的代码文件后缀
  codeExtensions: ['.js', '.jsx', '.ts', '.tsx', '.html', '.css', '.scss', '.less']
}

// 1. 收集public下所有图片资源
const allImages = []
const traversePublic = (dir) => {
  const files = fs.readdirSync(dir)
  files.forEach(file => {
    const fullPath = path.join(dir, file)
    const stat = fs.statSync(fullPath)
    if (stat.isDirectory()) return traversePublic(fullPath)
    const ext = path.extname(file).toLowerCase()
    if (config.imageExtensions.includes(ext)) {
      const relativePath = '/' + path.relative(config.publicDir, fullPath).replace(/\\/g, '/')
      allImages.push({ fullPath, relativePath })
    }
  })
}
traversePublic(config.publicDir)

// 2. 收集所有代码文件的内容
let allCodeContent = ''
const traverseFiles = (dir) => {
  const files = fs.readdirSync(dir)
  files.forEach(file => {
    const fullPath = path.join(dir, file)
    const stat = fs.statSync(fullPath)
    if (stat.isDirectory()) return traverseFiles(fullPath)
    const ext = path.extname(file).toLowerCase()
    if (config.codeExtensions.includes(ext)) {
      allCodeContent += fs.readFileSync(fullPath, 'utf-8')
    }
  })
}
traverseFiles(config.srcDir)
traverseFiles(config.publicDir)

// 3. 筛选未使用图片
const unusedImages = allImages.filter(img => !allCodeContent.includes(img.relativePath))

console.log('未使用图片总数：', unusedImages.length)
console.log('未使用图片路径：')
unusedImages.forEach(img => console.log(img.fullPath))

// 确认扫描结果无误后，可取消下方注释直接删除未使用图片
// unusedImages.forEach(img => {
//   fs.unlinkSync(img.fullPath)
//   console.log('已删除：', img.fullPath)
// })

使用方法：将脚本保存为项目根目录下的find-unused-images.js，执行node find-unused-images.js即可输出扫描结果。

方法2：使用工程化插件 #

• 如果项目使用Webpack，可以安装unused-files-webpack-plugin插件，打包时会自动识别包括图片在内的所有未引用静态资源
• 如果项目使用Vite，可以安装vite-plugin-unused-files插件，同样支持扫描public目录下的未使用资源

注意事项 #

• 扫描前先将代码提交到Git或者备份public文件夹，避免误删后无法恢复
• 注意排查manifest.json、站点配置文件里引用的图标类资源，这类引用很容易被漏扫
• 如果项目存在服务端渲染、静态页面生成逻辑，需要将对应生成的产物文件也纳入扫描范围

内容的提问来源于stack exchange，提问作者Moncif Jbara