根据覆盖率报告删除未使用的JavaScript代码

Question

有一个很棒的javascript库（约40 000行代码）和一个使用少于 50％库代码的应用程序。

有一项测试利用了库中所需的所有功能，可以生成覆盖率报告。

如何以编程方式删除依赖于测试的每个未使用的代码行？

注意：覆盖率报告包含已执行的行的索引，但不准确：忽略右括号，即使方法体不是等，也会将带有方法名称的行标记为已执行。 / p>

Answer 1

您可以尝试使用：

npm install -g fixmyjs
fixmyjs <filename or folder>

这是fixmyjs project

它是一个很好的清理工具，它似乎与某些版本的ecmascript缺乏兼容性

Answer 2

Closure Compiler提供了一些非常高级的未使用代码清理功能。一些例子：

删除死代码块

function hello(name) {
  alert('Hello, ' + name);
}

function hi(name) {
    alert('Hi, ' + name);
}

hello('New user 1');
hello('New user 2');

编译为：

alert("Hello, New user 1");
alert("Hello, New user 2");

完全剥离hi函数并内联hello。 （live demo）

转向更复杂的案例

随着代码变得越来越复杂，它找到了新的优化方法。例如：

let greeted = 0;

function hello(name) {
  greeted += 1;
  alert('Hello, ' + name);
}

function hi(name) {
  greeted += 1;
  alert('Hi, ' + name);
}

hello('New user ' + greeted);
hello('New user ' + greeted);

变为：

var a = 0;
function b() {
  var c = "New user " + a;
  a += 1;
  alert("Hello, " + c);
}
b();
b();

（live demo）

确保打开ADVANCED_OPTIMIZATIONS编译级别以启用死代码删除。

Answer 3

有两种技术可以消除死代码，可以使用javascript build systems- webpack。

1. 死码消除（DCE）： 编译器优化 - 它排除了程序中不需要的内容。

2. 树木摇晃 它反向工作，仅包括程序中实际需要的内容。

here进行详细配置。

Answer 4

我害怕这种做法不起作用。不是那么容易，也不是你至少可以获得的数据。

1. 测试的覆盖率报告利用了所有必需的功能正在使用哪个覆盖率指标？它是否锻炼了所有的价值观，条件和可能的组合？如果没有，您可能会错过部分代码的使用。

2. 如果您的承保范围报告不准确，则不能依赖它来执行删除操作。虽然大括号

如果有足够好的测试套件，您可以使用代码覆盖率报告来提示。删除报告为未使用的代码，重新运行测试并检查它们是否仍然通过。重复，直到可以删除更多的代码片段。

Answer 5

您可以使用一些java脚本自动化工具删除不需要的代码，首先需要安装以下任何一个js liblary（节点必须）。
tree-shaking

UglifyJS2

访问任何一个网站。或者你可以使用chrome dev工具删除（但要小心，在识别不需要的代码之前测试很多情况，因为这个程序将识别不需要的代码意味着，你的进程或测试用例没有执行哪些代码）

Remove Ugly JS code by chrome dev

这适用于我的情况（但我的js代码少于10k行）

Answer 6

为了自动从包中删除未使用的代码，我们有：

1. 摇树
2. Ugliy和Minification工具，例如uglifyjs，Terser
3. Google闭包编译器（最佳结果）

但是，要查找未使用的资产，要手动删除它们，可以使用deadfile库： https://m-izadmehr.github.io/deadfile/

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

没有任何配置，它支持ES6，JSX和Vue文件：