清理长期未用组件需三步：先用eslint插件检测未使用的导入，再用depcheck识别完全未被引用的文件，最后通过react devtools验证渲染状态，并辅以路由、全局搜索、storybook和git grep四重检查确保无遗漏。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
清理React项目中长期未使用的组件，能减少打包体积、降低维护成本、避免误引用导致的运行时错误。手动翻代码找“没人用”的组件效率低且容易遗漏，必须结合静态分析与运行时验证。
用 ESLint 插件扫描未引用的组件文件
安装 @typescript-eslint/eslint-plugin 和 eslint-plugin-unused-imports：
npm install --save-dev @typescript-eslint/eslint-plugin eslint-plugin-unused-imports
在 .eslintrc.js 的 plugins 和 rules 中加入配置：
rules: { 'unused-imports/no-unused-imports': 'error', 'unused-imports/no-unused-vars': ['error', { 'vars': 'all', 'varsIgnorePattern': '^_', 'args': 'after-used', 'argsIgnorePattern': '^_' }] }
这一步只检测 被 import 但从未使用 的命名导入，对默认导出组件（如 export default Button）不敏感——所以它只能发现“导入了却没用”，不能发现“根本没人导入”。
用 depcheck 工具识别完全未被引用的组件文件
depcheck 是专为查找项目中未被任何地方 import/require 的模块而设计的 CLI 工具。
全局或本地安装：npm install -g depcheck
在项目根目录执行：depcheck --ignore-bin-package --ignores=react,react-dom,prop-types,@types/*
输出中列出的 .tsx 或 .jsx 文件，就是当前项目里没有任何 import 语句指向它们的组件文件。注意：如果某个组件仅通过动态 import() 加载（比如路由懒加载），depcheck 默认会把它标为“未使用”，需人工核对。
确认无误后，直接删除这些文件即可。删前建议 git add -N 查看是否真无任何引用痕迹。
用 React DevTools 验证组件是否仍在渲染树中
方法一：打开浏览器开发者工具 → 切换到 Components 面板 → 点击左上角 “⋮” → 勾选 “Highlight updates when components render”。
方法二：在页面上反复触发各种操作（切换路由、展开折叠、表单提交），观察哪些组件区域从未高亮——这些大概率是已下线但未删除的组件。
方法三：在 Components 面板顶部搜索框输入组件名，若搜不到，说明它当前未挂载；若搜到但始终处于 unmounted 状态（右下角显示 “Unmounted”），也应纳入清理范围。
⚠️ 注意：DevTools 只反映当前会话的渲染快照，无法覆盖所有用户路径。务必结合测试环境全链路点击走查。
批量清理前的关键检查
第一步：确认该组件不在路由配置中（检查 src/routes.tsx、app/router.tsx 或类似路由定义文件）。
第二步：全局搜索组件名（含 PascalCase 和 kebab-case 拼写变体），特别注意字符串拼接路径（如 `./components/${name}/index`）、JSON 配置项、mock 数据、e2e 测试文件中的引用。
第三步：检查是否被 Storybook 引用（查看 *.stories.tsx 文件），若仅用于文档演示，可保留但移出 src 目录，放入 stories/ 或 .storybook/ 下。
第四步：执行 git grep -n "ComponentName" -- ':!node_modules' ':!dist' ':!build'，确保没有漏网之鱼。
完成以上四步后，将目标组件文件及其配套的样式、测试、story 文件一并移入回收站。
