CODEWITHSUNDEEP
javascriptrefactoringdead-code
JoelFan
JoelFan

Reputation: 38714

find dead JavaScript code?

We are refactoring a legacy web app and as a result are "killing" quite a lot of JavaScript code but we're afraid of deleting what we think is dead code due to not being sure. Is there any tool / technique for positively identifying dead code in JavaScript?

Upvotes: 77

Views: 38934

Answers (8)

jstaab
jstaab

Reputation: 3865

I hate this problem, and that there are no good tools for solving it, despite the parse-heavy javascript ecosystem. As mentioned in another answer, deadfile is pretty neat, but I couldn't make it work for my codebase, which uses absolute imports from a src directory. The following bash was good enough to get an idea of whether any files weren't imported anywhere (I found some!), which was easily hand-verifiable.

for f in $(find src -name '*.js' | grep -E 'src/(app|modules|components).*\.js$' | grep -v '.test.js'); do
  f=${f/src\//};
  f=${f/\/index.js/};
  f=${f/.js/};

  echo "$f imported in"$(grep -rl "$f" src | wc -l)" files"
done

I didn't care about tests/resources, hence the app|modules|components bit. The string replacements could be cleaned up significantly too, but hopefully this will be useful to someone.

Upvotes: 0

Moji Izadmehr
Moji Izadmehr

Reputation: 2524

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: enter image description here

Upvotes: 8

browserless
browserless

Reputation: 2132

If you want to automate this I'd take a look at https://github.com/joelgriffith/navalia, which exposes an automated API to do just that:

const { Chrome } = require('navalia');
const chrome = new Chrome();

chrome.goto('http://joelgriffith.net/', { coverage: true })
  .then(() => chrome.coverage('http://joelgriffith.net/main.bundle.js'))
  .then((stats) => console.log(stats)) // Prints { total: 45913, unused: 5572, 
  percentUnused: 0.12135996340905626 }
  .then(() => chrome.done());

More here: https://joelgriffith.github.io/navalia/Chrome/coverage/

Upvotes: 2

NiRUS
NiRUS

Reputation: 4259

Chrome has come up with new feature which lets developer see the code coverage, ie., which lines of codes were executed.

This certainly is not a one stop solution, but can extend a helping hand to developers to get code insights.

Check this link for details

Rolled as apart of Chrome 59 release

tools

Upvotes: 6

Sukhanov Niсkolay
Sukhanov Niсkolay

Reputation: 1328

WebStorm IDE from JetBrains can highlight deadcode and unused variables in your project.

Upvotes: 7

Julio Santos
Julio Santos

Reputation: 3895

There's grep. Use it to find function calls. Suppose you have a method called dostuff(). Use grep -r "dostuff()" * --color on your project's root directory. Unless you find anything other than the definition, you can safely erase it.

ack is also a notable alternative to grep.

Upvotes: 6

haylem
haylem

Reputation: 22673

Without looking for anything too complex:

Upvotes: 12

Harmen
Harmen

Reputation: 22436

You could use code optimizers as Google Closure Compiler, however it's often used for minimizing code.

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

function test(){
alert('hi');
}

hello('New user');

Will result in

alert("Hello, New user");

For example.

Another thing you could do is to use Chrome's Developer Tools (or Firebug) to see all function calls. Under Profiles you can see which functions are being called over time and which are not.

DT Profiles

Upvotes: 6

Related Questions