如何检查React项目中未被引入的资源？

下面是几种实用的方案，帮你找出src目录里没被任何组件引入的资源：

• 借助Webpack Bundle Analyzer
  如果你用Webpack打包项目，这个插件可以可视化展示打包后的资源构成——未被引用的资源根本不会被打包进去。

  1. 安装依赖：npm install webpack-bundle-analyzer --save-dev
  2. 在webpack.config.js中添加插件配置：

     const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
     module.exports = {
       plugins: [new BundleAnalyzerPlugin()]
     };
     

  3. 执行打包命令npm run build，会自动打开分析页面，对比src目录里的文件和打包后的资源，就能找出没被打包的未引用资源。

• 使用depcheck工具
  这是一个专门检测项目中未使用依赖、文件的工具，操作简单：
  直接在项目根目录运行npx depcheck，它会扫描整个项目，列出未被引用的文件。注意：动态引入（比如import(${path})）的资源可能会被误判，需要手动核对结果。

• 自定义Node.js脚本扫描
  如果你需要更精准的控制，可以自己写脚本遍历文件：

  1. 用Node.js的fs模块遍历src目录下的所有资源文件（比如图片、样式、工具类等）
  2. 解析所有组件文件（.js/.jsx/.ts/.tsx）的import语句，提取被引用的文件路径
  3. 对比两者，找出不在引用列表里的资源文件。可以用@babel/parser解析AST来准确提取import路径，避免正则匹配的误差。

• IDE手动/插件辅助检查
  比如VS Code里，选中某个资源文件后，右键选择「查找所有引用」，如果没有搜索结果，说明这个文件未被引用；也可以安装「Unused Files」这类插件，批量扫描项目中的未使用文件，适合小规模项目快速排查。

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