<< ReplaceBetweenTags function with delegate to describe transformation | Home | Case-insensitive Contains extension for list of strings >>

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:

 
«May»
SunMonTueWedThuFriSat
2829301234
567891011
12131415161718
19202122232425
2627282930311
2345678

About
Article Categories
Archives
Post Categories
Links
Syndication:

RSS ATOM