Remove unused javascript code based on coverage report

Question

There is a big javascript library (~ 40 000 lines of code) and an application which uses less than 50% of the library's code.

There is a test which utilizes all the needed functionality from the library and can produce coverage report.

How to remove programmatically every unused line of code relying on the test?

Note: coverage report contains indices of lines which were executed but it is not accurate: closing braces are ignored, lines with method names are marked as executed even if the method body was not etc.

Answer 1

You can try to use:

npm install -g fixmyjs
fixmyjs <filename or folder>

This is the fixmyjs project

it is a great tool for cleanup, it appears to lack compatibility with some versions of ecmascript

Answer 2

Closure Compiler provides some quite advanced unused code clean up features. Some examples:

Removing a dead code block

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

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

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

Compiles to:

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

completely stripping away the hi function and inlining hello. (live demo)

Moving to a more complicated case

As the code gets more complicated, it finds new ways to optimize. For example:

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);

Becomes:

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

(live demo)

Make sure you turn on the ADVANCED_OPTIMIZATIONS compilation level to enable dead code removal.

Answer 3

There are two techniques to eliminate dead code and it is possible using javascript build systems- webpack.

1. Dead code elimination (DCE) : compiler optimisation- It excludes which is not needed in the program.

2. Tree Shaking It works in reverse direction, includes only what is actually needed in the program.

Click here for detailed configuration.

Answer 4

You can use some java script automation tools to remove your unwanted codes, first you need to install either one of the below js liblary(node must).
tree-shaking

UglifyJS2

visit any one sites. or you can remove using chrome dev tools(but be careful, test many cases before you identify unwanted codes, because this procees will identify the unwanted code means, which codes did not executed by you way of process or your test cases)

Remove Ugly JS code by chrome dev

This worked fine for my case(but my js code less than 10k lines)

Answer 5

In order to automatically remove unused code from bundle, we have:

1. Tree shaking
2. Ugliy and Minification tools such as uglifyjs, Terser
3. Google closure compiler (best results)

However, in order to find the unused assets, to remove manually, you can use deadfile library: https://m-izadmehr.github.io/deadfile/

It can simply find unused files, in any JS project.

Without any config, it supports ES6, JSX, and Vue files:

Answer 6

This approach will not work I fear. Not that easy and not with the data you have available at least.

1. The coverage report for your test which utilizes all the needed functionality is using which coverage metric? Does it excercise all values, conditions and possible combinations thereof? If not, you may miss out on usage of some part of the code.

2. If your coverage report is not accurate you cannot rely on it for removal actions. Although braces

Given a sufficiently good test suite you can use the code coverage reports for hints however. Remove code that is reported as unused, re-run your tests and check whether they still pass. Repeat until nore more code snippets can be removed.