Select tool to minimize JavaScript and CSS size
Posted
by Michael Freidgeim
on Geeks with Blogs
See other posts from Geeks with Blogs
or by Michael Freidgeim
Published on Sun, 15 Apr 2012 09:08:08 GMT
Indexed on
2012/04/15
11:30 UTC
Read the original article
Hit count: 413
Filed under:
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.
Support intellisense and generate bundle in codebehind http://tech.kipusoep.nl/2010/07/23/umbraco-45-visual-studio-2010-dotless-jquery-vsdoc-squishit-masterpages/
.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)
v 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/99f3b61444da9ad1Support 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© Geeks with Blogs or respective owner
