AjaxControlToolkit Script Browser

When creating my last post I tracked down all of the JavaScript files the ModalPopup Toolkit control loads.  I did this manually by using FireBug to see what script files were pushed out to the client and then I used Reflector to find out the size of the file (the Toolkit embeds the JavaScript files as resources).  That was tedious.  But I found the information pretty useful (I wouldn't have guessed the ModalPopup required the RoundedCorners script) and so I thought it might be useful to view this information for all of the Toolkit controls.

So I cooked up a simple console application that rips through the Toolkit's assembly (I used version 1.0.20229.0) and tracks down all of the ClientScriptResources a particular control is using.  As I identified the scripts I ran then each through the minify -> gzip process so I could better gauge how large these scripts are when compared to jQuery and some of its plug-ins.  A few things to note …

  • Unless I am mistaken, the Toolkit scripts were minified before they were embedded into the Toolkit's assembly.  I don't see any comments in the source code or anything so I am assuming this is correct.  Does anyone know what tool was used here?
  • I also downloaded the YUI Compressor (another minifier) to see how much better it could do than what comes by default
  • I did the same with JSMin
  • Finally to simulate HTTP compression, I gzipped all of the minified files to get a closer approximation to the size of the file that is actually transmitted

Below is what it looks like (I fit the output into one of my grouping grid’s).  So you can browse the Toolkit controls and check out both how many scripts the control depends on and what the overall compressed size of the script is (i.e. the ModalPopup compressed is only 22 KB – much smaller than the original 102 KB).

Live Demo | Download

image

That's it.  Enjoy!

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

WP Like Button Plugin by Free WordPress Templates