在前端开发中，随着项目的迭代和需求的变化，源码中往往会积累大量未被使用的代码（Dead Code）。这部分代码可能包括未调用的函数、未使用的变量、未被引用的模块以及多余的 CSS 样式。虽然在构建时通过 Tree Shaking 可以剔除这些代码以减少打包体积，但如果希望从源码层面就把这些无用代码清除掉，从而保持代码库的整洁和可维护性，则需要借助一些静态分析工具和 IDE 插件来实现。

下面，我们分别介绍针对 JavaScript/TypeScript 和 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 规则可以帮助你在开发过程中检测未使用的变量、函数和参数。
配置示例（.eslintrc.js）：

1
2
3
4
5
6
module.exports = {
  parser: '@typescript-eslint/parser', // 针对 TS 项目plugins: ['@typescript-eslint'],
  rules: {
    'no-unused-vars': 'warn', // 标记未使用的变量'@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
  },
};

通过 IDE 的 ESLint 插件，你可以直接在源码中标记出未使用的代码，然后手动删除。

3. 借助 IDE 插件

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

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

清理 CSS 代码

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

虽然 PurgeCSS 常用于构建时清理未使用的 CSS，但你也可以将它配置为对源代码进行分析，生成一份未使用样式的报告，然后手动删除对应的代码。
使用示例：

1
2
3
4
5
6
7
8
9
10
11
const { PurgeCSS } = require('purgecss');
const fs = require('fs');

(async () => {
  const purgeCSSResult = awaitnewPurgeCSS().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 代码。

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

  1. 风险评估
    自动删除未使用代码存在风险，误删潜在未来会用到的代码可能导致功能异常。建议先生成报告，再手动确认删除。

  2. 版本控制
    在进行大规模清理前，务必做好版本控制，确保能够回退到稳定版本，以防出现不可预料的问题。

  3. 团队协作
    与团队成员沟通，确保大家对哪些代码属于”死代码”有共识，避免误删共享库或待重构代码。

  4. 持续维护
    清理工作不是一次性的，应定期进行代码审查和重构，以保持代码库的整洁和高效。

结论

直接从源码中清除未使用的代码需要借助静态分析工具和 IDE 插件，而不是仅依赖构建时的 Tree Shaking。对于 JavaScript/TypeScript，可以使用 ts-unused-exports、ts-prune 和 ESLint 等工具检测未使用的代码；对于 CSS，则可以利用 PurgeCSS 的报告功能和浏览器 Coverage 工具来识别无用的样式。
通过定期审查和谨慎删除，你可以保持代码库的高效和清晰，进一步提升项目的可维护性和性能。

Happy Coding!