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).
That's it. Enjoy!
Comments
This is fantastic. Thanks alot, Matt!
The Ajax Control Toolkit automatically strips comments from the JavaScript files when its built in Release mode. This is done as a pre-build action.
The comment stripper can be found in the Binaries folder of the ACT, its called JavaScriptCommentStripper.dll
I dont like it very much though, because all it does is remove comments and newlines.
That is pretty uber, but the source is all available for the ACT. I just load it up a new instance of VS2008 to figure out what I need to know. Its not as tedious as tearing through like you did with Reflector, plus there are comments.
The Toolkit does come with a lot of scripts in there (its a result of the MS AJAX Behavior/Component design - one script = one control), but they do have their own Toolkit Script Manager that does script combining and stuff too. A script combiner is also in the ASP.NET 3.5 SP1 Beta, but I havent tried it out.
It would be handy if they could minify it too though frankly gzipping is the best overall compression.
I believe the toolkit scripts minification is simply a matter of whether you deploy the debug or release assembly, regardless of your compilation debug true or false setting. The debug assembly retains all the comments and whitespace as seen in the original source code.
@Josh -
Thanks. I thought it was pretty interesting. I learned 2 things
- there are more scripts being pulled down that I thought
- and the minifing/gzipping makes a huge difference
@Thomas, @Ryan -
Thanks - it was pretty lazy of me not to track this down myself ;)
@Thomas
Yep, it looks like the YUI one consistently does a better job.
@Eric Hoff -
Thats a good point. All of the js behaviors have a reference to the scripts they depend on. I poke around that code enough I should have remembered that ;)
Hi Matt,
Thanks a lot.
I did find out ASP.NET Ajax Toolkit javascript files were very large, but didnot know how to decrease their size.
This article is really very useful.
This is definitely a useful piece of information. Thanks Matt! (FYI, table gets ugly in page 9.)
@Vishal -
Just curious - what are you going to do to decrease the size? If you are using the Release version of the Tookit, you should be getting the minification/gzipping for free (the value of the first GZipped column).
@Mustafa -
Thanks for letting me know about that Mustafa. I will see if I cant get that fixed tonight.
Hi Matt,
is there any way to use user control as a content of Popup Extender?. i am facing problem regarding that.
Hi Matt,
Do you have compiled version of all the scripts(minified/Gzipped)? Actually I dont have Visual studio 2008, so couldn't open you project file. Can you give me 2005 version of you project?
How to get the AjaxControlToolkit webresource.axd used in a response.