9

I've inherited a page that is extremely complex and has a ton of <script src=... includes.

I suspect a lot of the includes are not used. Is there a way to figure out which of them are not used?

AngryHacker
  • 59,598
  • 102
  • 325
  • 594
  • Should invent a plugin for that! Wow! That definitely would be nice to have! – Max Pringle Sep 08 '17 at 20:41
  • dirty solution: remove them one by one and watch for errors. – Amr Elgarhy Sep 08 '17 at 20:43
  • 1
    **All** the script tags are used, as in they all load. Wether or not they are neccessary or not, is almost impossible to figure out programatically, as they can be used for different things in different pages, events that happen later etc. – adeneo Sep 08 '17 at 20:44
  • Unfortunately I think the only way to find out is by commenting them out one by one and running the page to see if anything no longer functions or causes a syntax error but as the comment above has pointed out, it would be cool to have something to detect but would no doubt be pointless as the browser would have to load the plugin/script before checking for use of it and wouldn't be able to modify that page without server-side. Modifying dynamically would be pointless as it would still continue to load them before removing them. – NewToJS Sep 08 '17 at 20:45
  • jslint might help? https://stackoverflow.com/a/1169896/20126 – Amr Elgarhy Sep 08 '17 at 20:46
  • 1
    Possible duplicate of [Detect linked & unused files and unused JavaScript](https://stackoverflow.com/questions/13174988/detect-linked-unused-files-and-unused-javascript) – Amr Elgarhy Sep 08 '17 at 20:47

1 Answers1

10

Chrome 59 includes a new Coverage tool, which can be enabled from the 3-dot menu in DevTools.

Chrome DevTools -> Options -> More tools -> Coverage

You should be able to enable the tool, navigate the website and perform scripted actions, and then view which lines were actually called. Files that are not called will appear entirely red (no lines run).

Edit: As mentioned in the comments, this is still not an optimal solution, since it will only detect lines which have actually run. As @adeneo mentioned, it is almost impossible to statically determine which parts of the code will run, simply because of the complexity of JS.

If this is an XY Problem actually intended to decrease the number of initial HTTP requests, it may be a good idea to simply concatenate all required files and minify that (HTTP/1.1), or investigate grouping related assets and serving via HTTP/2.

Scott
  • 5,338
  • 5
  • 45
  • 70
  • Does that mean you have try every single functionality on the page, and even predict what events may or may not be used at a later time? – adeneo Sep 08 '17 at 20:47
  • This sounds really useful but for functions run via `click` / `change` would those only be shown as needed/used after the client has triggered that function? If so then it would mean having to run all functions to get the list of used/needed scripts... – NewToJS Sep 08 '17 at 20:48
  • 1
    Yes, sadly. However there would be no way to statically determine if those codepaths would run, given the extremely dynamic nature of JS. It's still more elegant than systematically removing files one by one, though. – Scott Sep 08 '17 at 20:49
  • @Scott Yeah I thought as much. So really you could just comment out the script tags one by one and see if a syntax error occurs which would give the same thing as the Coverage Tool... Advantage of the coverage tool would be not having to comment out and reload all the time but would need to make sure all functions are executed. **+1** one though for a great suggestion. I will be sure to check this out for myself. – NewToJS Sep 08 '17 at 20:52
  • @NewToJS Yeah, it would be the same process to test though. For example, if a function is only called within a `click` event, that event would have to be triggered both for the Coverage tool to pick it up or an error to occur. – Scott Sep 08 '17 at 20:57
  • I did try the Coverage tool, but it's simply not enough because of the reasons you indicated. – AngryHacker Sep 08 '17 at 21:31
  • @AngryHacker I don't think there is any other way to reliably check whether a code file is used, unfortunately. New applications using imports can take advantage of tree-shaking, but older applications using piles of `script` tags+regular DOM events are much more difficult to minify. Maybe you could try using the Coverage tool for a more high-level overview of unused files to eliminate obviously dead files, and go from there. If you're trying to cut back on HTTP requests for the initial page load, another option might be to concat all scripts into a single file, and minify that. – Scott Sep 09 '17 at 00:31
  • That's what I ended up doing. It's a very painstaking process. – AngryHacker Sep 09 '17 at 05:05