Automatically Combine, minify, compress and much more on the fly.
Here you will learn in 5 steps how to implement the combine and minify project originally from codeplex into any .net application. I’ve just tested this on an Umbraco installation and it works flawlessly, the project also makes use of 2 open source libraries.
The original project can be found http://combineandminify.codeplex.com/ I have converted this project from c# to vb and made some considerable further optimisations in the code around the caching mechanism.
The two other libraries included are:
EcmaScript.NET.modified.dll
Yahoo.Yui.Compressor.dll
Along with a lot of custom code to automatically provide a cached based minify & compress for your css & jss files. But it doesn’t stop there you can also use this project to remove white space from the html rendering to the client (default operation), all comments and commented code in .js and .css file includes is striped , you can insert VersionId’s in font urls and images and even preload images.
Ok so lets break it down.
What does it do and how?
Taking the .js and .css includes in particular, during the request life-cycle of the .net engine combineAndMinify will scan the header of the page just prior to rendering to the client, it will collect up the .js and .css includes, minify, compress, remove comments and white spaces and place the new combined content into the cache. So that’s one cache record for the .js and one for the .css. It will then strip out all the include references from the page header and replace them with a unique include reference pointing to the cached version for the browser to process. in your webconfig you have told IIS that all requests to .js and .css files must be routed through the combineandminify class, so when the browser then requests the include eg 33212cce52b6065a.js, the combineAndMinify handler then pulls the content from the cache and sends it to the client.
This process optimises your site in two ways, it caches the includes, and provides the client with only one include per type to request from the server.
The unique names are calculated using logic on various aspects, for example if you wished that the caching occur per page or for the entire website at domain level.
Out of the box the combineAndMinify is intelligent enough not to touch any include that references a different domain, and is in fact very customisable in that respect.
Furthermore it also knows when any of the files that it has cached change and will automatically update the cached version on the active request the change has been detected on.
See the full spec on codeplex.
Configuration settings:
| configuration>combineAndMinify | ||
| Config Attribute | Default Value | Possbile Values |
| removeWhitespace | false | true/false |
| insertVersionIdInFontUrls | false | true/false |
| insertVersionIdInImageUrls | false | true/false |
| makeImageUrlsLowercase | false | true/false |
| prioritizedImages | true | true/false |
| preloadAllImages | false | true/false |
| cookielessDomains | ||
| enableCookielessDomains | Always | Never Always/ReleaseModeOnly/DebugModeOnly |
| minifyJavaScript | true | true/false |
| minifyCSS | true | true/false |
| combineJavaScriptFiles | PerGroup | None/PerGroup/All |
| combineCSSFiles | PerGroup | None/PerGroup/All |
| headCaching | None | None/PerSite/PerFolder/PerPage/PerUrl |
| exceptionOnMissingFile | Never | Never/Always/ReleaseModeOnly/DebugModeOnly |
| active | ReleaseModeOnly | Never/Always/ReleaseModeOnly/DebugModeOnly |
If your even half technical you can guess what half of these configuration settings do, if you need a further understanding on all the configuration settings please visit the codeplex project website because its beyond the scope of this how to.
Implementation
- Copy the binaries to your bin folder and add references to them or include the project into your solution
- Copy and rename “HeadAdapter.browser.txt” to HeadAdapter.browser to your App_Browsers folder
- make the required changes to your web.config file
- change the combineAndMinify config attribute “active” from “Never” to “Always”
- test the solution in firefox, ie or chrome and verify the compression in firebug F12 Developer tools or FireBug Lite respectively.
The vb.net converted, enhanced version of the project compiled to binaries and other files you will need:
If anyone has any problems at all, I will help where I can. If you want the vb.net version of this project then let me know and I’ll send it over.
Question – wouldn’t it be better to use similar techniques (with a vb.net class) that creates static files that push to a CDN with unique names (so the browser refreshes)?
On-the-fly seems good for testing or small loads, but production should not put that work into every request for a page.
Am I Wrong?
Good work overall – thanks!
Hi Charles, Thanks for your interest
I think you slightly miss understnad
It caches each unique combination, so it only combines and compresses once for each request and this is also configurable within the web config. It also notices when a file is updated and re caches accordingly