如何检测NX工作区Angular类库中的未使用组件、状态管理等代码？

NX内置依赖分析命令 #

NX原生提供未使用代码扫描能力，无需额外工具就能覆盖大部分场景：

• 扫描整个工作区的未使用组件、服务、文件等：

  nx dep-graph --unused
  

  执行后会生成可视化依赖图，同时在终端输出未被任何项目引用的文件清单，包括组件类、服务类、配置文件等。
• 针对特定类库精准扫描：

  nx dep-graph --unused --projects=your-library-name
  

  把your-library-name替换为目标类库名称，仅扫描该库内的未使用代码。

扩展ESLint覆盖更多场景 #

在现有no-unused-vars基础上，添加Angular专属规则：

• 检测未使用组件：安装@angular-eslint/eslint-plugin后，在ESLint配置中启用@angular-eslint/no-unused-components规则，自动识别未在模板或路由中引用的组件。
• 检测未使用服务方法：结合eslint-plugin-unused-imports，或自定义ESLint规则扫描服务类中从未被调用的方法。
• 检测未使用CSS样式：用stylelint搭配stylelint-no-unused-selectors插件，针对Angular的.component.css/scss文件扫描未被模板使用的选择器。

状态管理代码检测（以NgRx为例） #

如果使用NgRx做状态管理：

• 启用@ngrx/eslint-plugin的@ngrx/no-unused-selectors规则，配合nx lint your-library-name命令，检测未被组件或其他选择器引用的NgRx选择器。
• 编写简单脚本扫描未被dispatch的action，或未被订阅的effect——比如遍历action文件，对比项目中dispatch的调用记录。

第三方工具补充 #

• ts-prune：专门扫描TypeScript项目中未使用的导出，适合快速定位未被引用的组件、服务类：

  npx ts-prune --project ./libs/your-library/tsconfig.lib.json
  

• unused-files-webpack-plugin：如果项目用Webpack构建，集成该插件后，每次构建会输出未被打包的文件列表，直接定位未使用的资源。

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