如何检测React项目src目录中未使用的文件/文件夹并删除？

大型React项目里找未引用的文件，完全可以通过命令行或工具实现，下面是两种实用方案：

一、工具自动化检测（推荐） #

针对大型项目，用专门工具效率更高，能避免手动操作遗漏：

• depcheck：既能检测未使用的npm依赖，也能扫描项目中未被引用的源文件。
  安装命令：npm install -g depcheck
  运行命令（项目根目录执行）：depcheck --ignore-dirs=node_modules,build
  输出结果里的unused files板块，就是未被引用的文件列表。
• unused-files-webpack-plugin：如果项目用Webpack打包，这个插件会在打包过程中分析依赖树，输出未被引用的文件。
  安装后在Webpack配置中添加：

  const UnusedFilesWebpackPlugin = require('unused-files-webpack-plugin');
  
  module.exports = {
    plugins: [
      new UnusedFilesWebpackPlugin({
        patterns: ['src/**/*.*'],
        exclude: ['src/**/*.test.js', 'src/**/*.stories.js'] // 按需排除测试、文档类文件
      })
    ]
  };
  

  执行打包命令后，控制台会输出未被引用的文件路径。

二、手动命令行排查 #

如果不想额外安装工具，可以用系统自带的find和grep命令组合实现：

1. 先遍历src下的目标文件（按需排除测试、配置类文件）：
   find src -type f -name "*.js" -o -name "*.jsx" -o -name "*.ts" -o -name "*.tsx" | grep -v test | grep -v story
2. 写个简单的shell脚本批量检查每个文件是否被引用：

   #!/bin/bash
   FILES=$(find src -type f \( -name "*.js" -o -name "*.jsx" -o -name "*.ts" -o -name "*.tsx" \) | grep -v test | grep -v story)
   for FILE in $FILES; do
     BASENAME=$(basename "$FILE" .js)
     BASENAME=$(basename "$BASENAME" .jsx)
     BASENAME=$(basename "$BASENAME" .ts)
     BASENAME=$(basename "$BASENAME" .tsx)
     # 检查是否存在import或require引用
     grep -r -l "import.*$BASENAME\|require.*$BASENAME" src --include="*.js" --include="*.jsx" --include="*.ts" --include="*.tsx" | grep -v "$FILE" > /dev/null
     if [ $? -ne 0 ]; then
       echo "未被引用的文件：$FILE"
     fi
   done
   

   将脚本保存为find-unused.sh，赋予执行权限chmod +x find-unused.sh，运行即可得到未被引用的文件列表。

注意事项 #

• 删除文件前务必先备份项目或提交代码到版本控制，部分动态引用的文件可能无法被工具或命令检测到，需人工二次确认。
• 提前排除测试文件、Storybook文件、配置文件等无需被业务代码引用的文件，避免误判。

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