27

I am doing some JavaScript cleanup work on a legacy project, and trying to get rid of redundant JS libraries. I have done all the obvious ones (those that are not references from anywhere at all). But there are a number of JS files that are included in all pages (via tiles).

How can I find out whether they are actually used, short of going through content of each and search for each function in them? Is there a smarter/easier way to do this? It's a java based / Spring project if that helps by the way.

Ashkan Aryan
  • 3,504
  • 4
  • 30
  • 44
  • 2
    There's no trivial way. Is there 100% test coverage? If so, try removing parts one after the other and see if they fail. – Prinzhorn May 31 '13 at 09:54
  • 3
    I think this is impossible to do in an easy way (automatically) you have to actually understand the code AND look at generated pages. Even if you had put everywhere `console.log("I'm in xxx file");` there is no certainty that JS code won't execute on some user interaction, after some time or even based on some cookie/request parameter that is set when user go through some pages. – Xeon May 31 '13 at 09:55
  • 2
    @Pirnzhorn unfortunately not, this is part of the reason I'm doing this, some cleanup before getting people to add test and up the coverage! – Ashkan Aryan May 31 '13 at 09:57
  • Here you can find a good answer http://webmasters.stackexchange.com/questions/55025/how-to-check-if-linked-javascript-and-css-files-are-being-used – Plijen Mar 29 '16 at 14:58

4 Answers4

29

One of the latest updates from the chrome dev tools now includes a JS and CSS coverage tab that allows you to see your unused code.

https://developers.google.com/web/updates/2017/04/devtools-release-notes

1) Open the Command Menu.
2) Start typing Coverage and select Show Coverage.
li x
  • 3,953
  • 2
  • 31
  • 51
  • 2
    This is definitely the quickest way to manually prune unused code. (For new projects, modern build tools like Webpack offer code pruning -- but adding them to existing projects usually requires more effort than it's worth.) – Roy Tinker Jan 16 '18 at 18:33
3

I would suggest using spies for this task. They are used in TDD to test if functions are called, so that one could assert if calls are actually happening.

If you are lucky enough those js libraries are initialized in a constructor or in some other way, if so I would suggest you to spy on these init functions.
If not you might want to spy on all functions, but this is painful especially if you have big libraries, in that case I would suggest to go one by one.

In the past I've used Jasmine or Sinon.JS for this task, follows an example:

it('should be able to login', function () {
  spyOn(authobj, 'isEmpty');  
  authobj.login('abc', 'abc');  
  expect(authobj.isEmpty).toHaveBeenCalled();
});

Once you have spies setup on the proper functions then it should be just a matter of checking if they are called or not, you could make a call to mixpanel (first example that comes to mind) with some info about it, so that later on you can see what functions are called and what are not.

Alberto Zaccagni
  • 30,779
  • 11
  • 72
  • 106
3

I think there's no easy way.

You can remove the script reference, run your site with the browser debugger turned on, and see if there's any "function not found" error.

But you'll have to test every single functionality in your site...

EDIT:

The answer from user li x seems to be the best at this moment.

Carlos ABS
  • 693
  • 9
  • 19
  • Why can't there be a new standard on how JS is added? This has got to be one of the most sort after solutions. This will fix so many things if Only it existed – samjco-com Sep 03 '20 at 01:21
0

You can also give a try to purifycss.

CLI usage:

$ npm install -g purify-css

purifycss <css> <content> [option]

Options:
  -m, --min        Minify CSS                         [boolean] [default: false]
  -o, --out        Filepath to write purified css to                    [string]
  -i, --info       Logs info on how much css was removed
                                                      [boolean] [default: false]
  -r, --rejected   Logs the CSS rules that were removed
                                                      [boolean] [default: false]
  -w, --whitelist  List of classes that should not be removed
                                                           [array] [default: []]
  -h, --help       Show help                                           [boolean]
  -v, --version    Show version number                                 [boolean]