Detect linked & unused files and unused JavaScript

Question

I just finished my website, which I started 2 years ago. I was always trying new things, which sometimes included adding different frameworks or other external JS files.

Answer 1

For this answer, I am not sure whether it's helpful or not. How about trying Sonar. Sonar has a javascript plugin that can check your js code quality and list the code that unused.

Answer 2

Though it is pretty old question, this might help for this type of problem - https://github.com/skpaul/LocateMe

I wrote this to use in my project.

Answer 3

In Google Chrome Developer tools, you can now view "Coverage" on the Sources tab to display unused Javascript and CSS by percentage of each file, or even on a line by line basis.

Here's the announcement of the feature in 2017.

Answer 4

I had this need so I created a tool that detects unused JS on the browser side, not just from the sources, so it can also test third parties scripts.

It works by creating a local proxy on your computer that intercepts JavaScript requests and instruments these files on-the-fly. The tool is than able to detect which parts of the instrumented files have been used by the page, and which don't.

I made it open-source and you can find it here: https://github.com/gmetais/unusedjs.

Answer 5

I've been looking at a similar task for the past few weeks myself and ended up with the following powershell query:

PS> Get-ChildItem -Path C:\PathToProject\ -Filter *.as?x -Recurse 
| select-string -pattern "src=""([^""]*.js)""" 
| Select -Expand Matches | Foreach { $_.Groups[1].Value } | select -unique

First it recursively selects all .aspx and .ascx files in our project directory, then finds src attribute values that refer to .js files (presumably those of script elements) and traces distinct values - voila, you have a list of .js files as referenced in your project!

It would be fairly straightforward to adjust the query so that it fits your specific project and its structure. Make sure you don't iterate over outdated files that may include obsolete references. Account for markup discreptancies - could you have used single quotes for attribute values in the past, or left unnecessary whitespace around the "equals" symbol, or both? Could you be including these files programmatically or asynchronously from inside another js files? etc. etc.

Answer 6

This answer offers Google's Closure Compiler which, in the process of minifying and concatenating your JavaScript code, can remove "dead code".

Quoting from the documentation for the compilation levels:

Compilation with ADVANCED_OPTIMIZATIONS removes code that is provably unreachable. This is especially useful in combination with large libraries. If you use only a few functions from a large library file, the compiler can remove everything except those functions from its output.

Also see this answer which contains more information on Google's Closure Compiler.