22

Was wondering if there's an extension or macro or something that looks through your solution and gives out a report of which js/css/image files are not being referenced anywhere in code?

I have a large project and over time it has accumulated dust. Other than manually searching for each file's usage, is there any other time saving way?

Mrchief
  • 75,126
  • 20
  • 142
  • 189

6 Answers6

9

There's a Visual Studio Extension that searches for unreferenced image files. It finds all image files in your project and then scan all aspx/cs/ashx/css/js files for references. It has not yet been updated for Visual Studio 2012.

http://visualstudiogallery.msdn.microsoft.com/fb7a9b9c-08e1-4bb4-91b4-8e512feb5a1b

Erik Olson
  • 5,807
  • 1
  • 18
  • 17
5

Update You will not find a tool that can systematically identify unused resources, because JavaScript, CSS, and image files can be loaded dynamically. This article shows how to load JavaScript and CSS dynamically, and it's a straightforward task in JavaScript to load an image dynamically. It's easy to imagine a scenario in which the image name is loaded from an external data source, or concatenated from another field value plus ".jpg". Clearly any tool that attempted to scan your source to find unreferenced files would miss these resources.

That said, you can search for hard-coded references to .js, .css, and .jpg files using Visual Studio's search by regular expression feature, or by using a high-powered text editor like Notepad++ with a Regular Expression search feature.

For example, to use Visual Studio to search for all files ending in .js that are referenced in ASCX ir ASPX pages, go to Edit/Find and Replace/Find in Files, set the search expression to .js> switch on "Use Regular Expressions", and set "Look in these file types" to "*.aspx; *.ascx". ("\" escapes the ".", and ">" means end of word, so that "foo.js" is found, but not "foo.jsx". Visual Studio has its own Regular Expression syntax, which is documented here)

In addition, the tools in my original response below can give a good picture of what JS/CSS/IMAGE resources are actually getting used when your site is loaded. When used in conjunction with a testing tool like Selenium, these should allow you to remove resources with confidence.

There are several tools you should look at:

WARI scans your web application and examines dependencies between JavaScript functions, CSS styles, HTML tags and images.

The goal is to find unused images as well as unused and duplicated JavaScript functions and CSS styles.

Dan Solovay
  • 3,134
  • 3
  • 26
  • 55
  • You're missing the point. those tools serve a different purpose. I need to find out unused files which are lying around but have no references in the code. These tools can only find out what is unused in the files that are being referenced/included in your application. – Mrchief Apr 23 '11 at 13:32
  • See my update above. I don't think it's possible to find unused JS/CSS/Image files with complete certainty, because they can be loaded dynamically by existing JavaScript. – Dan Solovay May 07 '11 at 04:33
1

The extension in the selected answer above only works in vs2012 while Code Maid works in vs2010 - vs2014:

There is a free extension called Code Maid that "is an open source Visual Studio extension to cleanup, dig through and simplify our C#, C++, F#, VB, XAML, XML, ASP, HTML, CSS, LESS, SCSS, JavaScript and TypeScript coding." Does images as well.

NickNo
  • 872
  • 15
  • 32
1

Solution Features

  • is semi - manual
  • isn't an extension
  • looks long but is not complicated or difficult
  • works for just images or all files
  • overcomes all the ajax tricks
  • should work with any project or version of Visual Studio

Steps

  1. Run the website in Chrome with debugging turned on (press F12 before launching website)
  2. Completely exercise the website. Make it download everything that it will ever download.
  3. Go to the Network tab.
  4. On the file grid, Click on any of the images that appear in the list (doesn't matter which one). This will make all column headers but Name go away.
  5. Click on the Name column header, to sort ascending.
  6. Do CTRL+A, CTRL+C to copy all file names.
  7. Paste into a new Google spreadsheet (in google docs) into cell A2.
  8. Repeat steps 6 and 7 if for any reason it didn't copy all the file names. Scroll down.
  9. Go into your actual website images directory (or whatever directory you are interested in comparing) in a command prompt and issue dir /b. Copy this into the clipboard (mark function) and paste into cell B2.
  10. In cell C2, paste this formula =not(isna(VLOOKUP(B2,$A$2:$A$TheBottomOfA,1,false))). Alter TheBottomOfA to be the last used row in column A.
  11. Copy the formula down for all your values in column B.
  12. In cell C1, type Is Used. In cell B1, type Name. Add a data filter on all the values in columns B and C. Set the filter with the mouse in C1 to show only Is Used=FALSE.

Result

What you're looking at in Column B is a list of files you are not using.

Note

I recommend moving the unused files to an offline folder instead of deleting them.

Warning

You still need to use common sense. BRAIN=ON

toddmo
  • 20,682
  • 14
  • 97
  • 107
1

2022 solution

you can use this extension in vscode to find all unused exports

Marzieh Mousavi
  • 1,213
  • 1
  • 12
  • 28
0

If you're using a new version of Visual Studio and can't use the extensions, what I did was this:

  1. Exclude all target files.
  2. Find ",,," (this indicates an absolute resource reference) and include each resource found. Note, you should try any unique keywords relevant to your references.
  3. Repeat step 2 until Visual Studio stops opening files (if no new matches are found, already opened documents will come into focus).
  4. Try building project. If you happen to miss a resource, Visual Studio will let you know. In that case, repeat steps 2-4; it is worth nothing this will rarely ever be necessary.

I've only had to do this once and I spent ten minutes, at most.