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.

Now I don't know which of the linked files/lines of JS are unused. Is there a tool which can detect these files and lines of code? It would save me a lot of time.

For the CSS the webkit developer tools from google chrome show the unused styles. As for the javascript I'm waiting for an answer too — Bruno Vieira, Nov 01 '12 at 10:21
@BrunoVieira the OP is not asking about unused styles, but unused javascript files that are sitting in the directory tree yet are not referenced from any of this pages. Also note that there's more than one page to deal with, but a whole app. — Aleks G, Nov 01 '12 at 10:23
That's why I didn't answer but rather made a comment because it may be useful if not for him for someone else @AleksG — Bruno Vieira, Nov 01 '12 at 10:23
@BrunoVieira See [this question of mine](http://stackoverflow.com/questions/8120048/how-to-clean-up-styles-in-a-large-web-site) for problems with that approach — Aleks G, Nov 01 '12 at 10:25
@BrunoVieira: Yes, this tool i use. So i search something like exactly this... — Michael Schmidt, Nov 01 '12 at 12:12

score 14 · Accepted Answer · edited May 23 '17 at 12:32

14

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.

edited May 23 '17 at 12:32

Community

1
1

answered Nov 02 '12 at 01:10

Whymarrh

13,139
14
57
108

Hey! Thanks for the link. I haven't time yet to read the documentation, and my first "dirty" try was really confusing... I try it on sunday...I'll report back – Michael Schmidt Nov 02 '12 at 09:56
1

Sorry for the late answer. Had a hard week. I tried your solution and it works how i want it :) Big Thanks! +1 & Accepted :) – Michael Schmidt Nov 12 '12 at 09:16

Gaël Métais · Answer 2 · 2016-06-27T20:18:03.040

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.

score 0 · Answer 3 · answered Nov 01 '12 at 10:24

0

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.

answered Nov 01 '12 at 10:24

OQJF

1,350
9
12

I found some guy talking about this http://www.jslint.com/lint.html, may be it can give you a hand. – OQJF Nov 01 '12 at 10:25
Thanks for your answer. I also found this question on SO. But it search for the code quality like: it is on the newest standard, how much are comments... The problem is, he also analyse unused Code, but do not display if it in use or not... – Michael Schmidt Nov 01 '12 at 12:15

score 0 · Answer 4 · answered Nov 02 '12 at 00:31

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.

Hey! Okay. Looks complicated. I try it on sunday...I'll report back — Michael Schmidt, Nov 02 '12 at 09:56

score 0 · Answer 5 · answered Jul 14 '19 at 01:57

0

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.

answered Jul 14 '19 at 01:57

riot

307
3
7

score 0 · Answer 6 · answered Apr 15 '20 at 06:27

0

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.

answered Apr 15 '20 at 06:27

s.k.paul

7,099
28
93
168

Detect linked & unused files and unused JavaScript

6 Answers6

Linked