Select tool to minimize JavaScript and CSS size

There are multiple ways and techniques how to combine and minify JS and CSS files.
The good number of links can be found in http://stackoverflow.com/questions/882937/asp-net-script-and-css-compression
and in http://www.hanselman.com/blog/TheImportanceAndEaseOfMinifyingYourCSSAndJavaScriptAndOptimizingPNGsForYourBlogOrWebsite.aspx

There are 2 major approaches- do it during build or at run-time.

In our application there are multiple user-controls, each of them required different JS or CSS files, and they loaded dynamically in the different combinations. We decided that loading all JS or CSS files for each page is not a good idea, but for each page we need to load different set of files.
Based on this combining files on the build stage does not looks feasible.
After Reviewing  different links I’ve decided that squishit should fit to our needs. http://www.codethinked.com/squishit-the-friendly-aspnet-javascript-and-css-squisher

Different limitations of using SquishIt.
We had some browser specific CSS files, that loaded conditionally depending of browser type(i.e IE and all other browsers). We had to put them in separate bundles,

For Resources and AXD files we decide to use HttpModule and HttpHandler created by Mads Kristensen

To GZIP html we are using wwWebUtils.GZipEncodePage() http://www.west-wind.com/weblog/posts/2007/Feb/05/More-on-GZip-compression-with-ASPNET-Content Just swap the order of which encoding you apply to start by asking for deflate support and then GZip afterwards.

Additional tips about SquishIt.

Use CDN: https://groups.google.com/group/squishit/browse_thread/thread/99f3b61444da9ad1
Support intellisense and generate bundle in codebehind http://tech.kipusoep.nl/2010/07/23/umbraco-45-visual-studio-2010-dotless-jquery-vsdoc-squishit-masterpages/

Links about other Libraries that were considered

A few links from http://stackoverflow.com/questions/5288656/which-one-has-better-minification-between-squishit-and-combres2

.Net 4.5 will have out-of-the-box tools for JS/CSS combining.
http://weblogs.asp.net/scottgu/archive/2011/11/27/new-bundling-and-minification-support-asp-net-4-5-series.aspx . It suggests default bundle of subfolder, but also seems supporting similar to squishit explicitly specified files.

http://www.codeproject.com/KB/aspnet/combres2.aspx  config XML file can specify expiry etc

https://github.com/andrewdavey/cassette
http://stackoverflow.com/questions/7026029/alternatives-to-cassette

Dynamically loaded JS files requireJS http://requirejs.org/docs/start.html  

http://www.west-wind.com/weblog/posts/2008/Jul/07/Inclusion-of-JavaScript-Files
Pack and minimize your JavaScript code size

YUI Compressor (from Yahoo)
JSMin (by Douglas Crockford)
ShrinkSafe (from Dojo library)
Packer (by Dean Edwards)

RadScriptManager  & RadStyleSheetManager -fromTeleric(not free)

Tools to optimize performance:

PageSpeed tools family http://code.google.com/intl/ru/speed/page-speed/download.html



v
posted @ Sunday, April 15, 2012 8:08 PM
Print

Comments on this entry:

No comments posted yet.

Your comment:



(not displayed)

 
 
 
 
 

Live Comment Preview:

 
«July»
SunMonTueWedThuFriSat
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789