如何清理源码里面没有被应用的代码

项目迭代久了，最常见的“技术债”之一就是：代码里堆了一堆没人敢删、也没人再用的东西——旧接口、废弃组件、改过几轮后遗留的工具函数、还有 CSS 里躺平的选择器。构建阶段的 Tree Shaking 的确能帮你把一部分“没被引用的导出”从产物里剔掉，但它解决不了“源码越来越难读、越来越不敢改”的问题。想把尸体代码从仓库里清干净，通常要靠静态分析 + IDE 辅助 + 人工确认这套组合拳。

下面按两类说：JS/TS 和 CSS。

清理 JavaScript/TypeScript 代码

1. 使用静态分析工具

ts-unused-exports / ts-prune

这类工具会扫一遍 TypeScript 工程，列出“导出了但没人用”的东西。它的优势是快，缺点是一定会有误报/漏报（比如动态引用、约定式导出、代码生成），所以输出更像“待处理清单”，别指望一键删干净。

ts-unused-exports
该工具会分析你的 TS 源码，并报告所有未被使用的导出。你可以根据报告结果，手动或借助脚本自动删除这些代码。
使用示例：
1
npx ts-unused-exports
ts-prune
另一个类似工具，专门用于检测未使用的 TypeScript 导出。
1
2
npm install -g ts-prune
ts-prune --project tsconfig.json
工具会输出未使用的导出列表，你可以据此手动清理源码。

2. 使用 ESLint 检测未使用代码

ESLint 的 no-unused-vars 规则可以帮助你在开发过程中检测未使用的变量、函数和参数。
比较常见的做法是：在项目里把这类问题当成 warning，先把“新产生的”卡住，再逐步把存量清掉。

配置示例（.eslintrc.js）：

module.exports = {
  parser: '@typescript-eslint/parser', // 针对 TS 项目
  plugins: ['@typescript-eslint'],
  rules: {
    'no-unused-vars': 'off',
    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
  },
};

配合 IDE 的 ESLint 插件，未使用的变量/导入会直接在编辑器里标出来，清理效率会高很多。

3. 借助 IDE 插件

现代 IDE（例如 VS Code）提供了丰富的插件生态，许多插件可以检测出未使用的代码并给予高亮提示。例如：

Code Spell Checker、Dead Code Detector 等插件可以帮助你识别未被引用的代码片段，便于后续清理。

清理 CSS 代码

1. 使用 PurgeCSS 等工具分析源码

PurgeCSS 更常见的用法是在构建阶段做“产物清理”，但你也可以先让它跑一份报告，拿着报告回头删源码里的无用样式（更稳，也更可控）。
使用示例：

const { PurgeCSS } = require('purgecss');

(async () => {
  const purgeCSSResult = await new PurgeCSS().purge({
    content: ['./src/**/*.html', './src/**/*.js', './src/**/*.ts'],
    css: ['./src/styles.css'],
  });
  // 输出报告，查看哪些 CSS 选择器未被使用
  console.log(purgeCSSResult);
  // 你可以根据结果手动更新或删除 styles.css 中的无用规则
})();

2. 手动检测结合浏览器工具

你还可以利用 Chrome DevTools 的 Coverage 面板来查看哪些 CSS 代码未被页面使用。

打开 DevTools，按 Ctrl+Shift+P（或 Cmd+Shift+P）输入 “Coverage”，运行后刷新页面，就能看到各个 CSS 文件的使用情况。
根据 Coverage 面板反馈的信息，手动检查并清理源码中的冗余 CSS 代码。

清理源码未使用代码的注意事项

风险评估
自动删除未使用代码一定有风险，尤其是带动态引用/埋点/权限开关的项目。我的习惯是先跑报告，再在 IDE 里一处处确认，宁可慢一点也别误删。
版本控制
在进行大规模清理前，务必做好版本控制，确保能够回退到稳定版本，以防出现不可预料的问题。
团队协作
与团队成员沟通，确保大家对哪些代码属于”死代码”有共识，避免误删共享库或待重构代码。
持续维护
清理工作不是一次性的，应定期进行代码审查和重构，以保持代码库的整洁和高效。

结论

直接从源码中清除未使用的代码需要借助静态分析工具和 IDE 插件，而不是仅依赖构建时的 Tree Shaking。对于 JavaScript/TypeScript，可以使用 ts-unused-exports、ts-prune 和 ESLint 等工具检测未使用的代码；对于 CSS，则可以利用 PurgeCSS 的报告功能和浏览器 Coverage 工具来识别无用的样式。
做完这一轮清理之后，建议把“新增死代码”也管起来：CI 上跑 eslint/ts 检查、PR 里强制过一遍 unused import，这样仓库不会很快又回到“越改越重”的状态。

Happy Coding!