如何在大型 React 项目中找到死代码?

IT技术 javascript reactjs refactoring dead-code
2021-05-16 00:42:09

为了重构客户端项目,我正在寻找一种安全的方法来查找(和删除)未使用的代码。

在大型 React 项目中,您使用什么工具来查找未使用/死代码?我们的产品已经开发了几年,手动检测不再使用的代码变得非常困难。但是,我们会尝试删除尽可能多的未使用代码。

对一般策略/技术(特定工具除外)的建议也受到赞赏。

谢谢

4个回答

解决方案:

对于节点项目,请在项目根目录中运行以下命令:

npx unimported

如果您使用流类型注释,则需要添加--flow标志:

npx unimported --flow

来源和文档:https : //github.com/smeijer/unimported

结果: 在此处输入图片说明

背景

就像其他答案一样,我尝试了很多不同的库,但从未取得真正的成功。

我需要找到没有被使用的整个文件。不仅仅是函数或变量。为此,我已经有了我的 linter。

我试过deadfile, unrequired, trucker,但都没有成功。

找了一年多了,还有一件事要做。自己写点东西。

unimported从您的入口点开始,并遵循您的所有导入/要求语句。将报告源文件夹中存在的所有未导入的代码文件。

请注意,此时它仅扫描源文件。不适用于图像或其他资产。因为那些通常以其他方式“导入”(通过标签或通过 css)。

此外,它还会有误报。例如; 有时我们编写脚本是为了简化我们的开发过程,例如构建步骤。那些不是直接进口的。

此外,有时我们会安装对等依赖项,而我们的代码不会直接导入这些依赖项。那些将被报告。

不过对我来说,unimported已经非常有用了。我已经从我的项目中删除了十几个文件。所以绝对值得一试。

如果您有任何问题,请告诉我。通过 github 问题,或在 twitter 上联系我:https : //twitter.com/meijer_s

首先,非常好的问题,在大型项目中编码人员通常会尝试多行代码测试,并且在结果的最后,很难找到未使用的代码。

有两种可能对您有用 - 我通常在需要删除未使用的代码并将其减少到我的项目中时这样做。

第一种方式 WebStorm IDE:

如果您使用web-storm IDE进行 JS 开发或 React JS/React Native 或 Vue js 等,它会告诉我们并用不同颜色或红色警告向我们指出很多提及作为编辑器中未使用的代码

但它不适用于您的特定场景,还有另一种方法可以删除未使用的代码。

第二种方式不需要的库:

删除项目中未使用代码的第二种方法是不需要的库,您可以在这里访问:unrequired github

另一个叫depcheck下NPM和GitHub的库在这里

只需按照他们适当的方法 - 如何使用它们,您将轻松解决这个未使用的问题

希望对你有帮助

诸如 unrequired 和 deadcode 之类的库仅支持遗留代码。为了找到未使用的资产,手动删除,可以使用deadfile

图书馆:https : //m-izadmehr.github.io/deadfile/

  • 对 ES5、ES6、React、Vue、ESM、CommonJs 的开箱即用支持。
  • 它支持导入/要求甚至动态导入。

在此处输入图片说明

它可以简单地在任何 JS 项目中找到未使用的文件。

无需任何配置,它支持 ES6、React、JSX 和 Vue 文件: 在此处输入图片说明

Webpack 解决方案:UnusedWebpackPlugin

我在一个大型前端 React 项目(1100 多个 js 文件)上工作并偶然发现了同样的问题:如何找出哪些文件不再使用?

到目前为止,我已经测试了下一个工具:

他们都没有真正奏效。原因之一是我们使用“非标准”进口。除了我们imports 中的常规相对路径之外,我们还使用webpack 解析功能解析路径这基本上允许我们使用整洁而不是繁琐的.import 'pages/something'import '../../../pages/something'

未使用的 Webpack 插件

所以这是我终于遇到的解决方案,感谢 Liam O'Boyle (eyobo) @GitHub:https : //github.com/MatthieuLemoine/unused-webpack-plugin

这是一个 webpack 插件,所以只有当你的打包器是 webpack 时它才能工作。

我个人觉得你不需要单独运行它是一件好事,而是它内置在你的构建过程中,当出现问题时会抛出警告。

我们的研究课题:https : //github.com/spencermountain/unrequired/issues/6