Skip to content


ASP.NET Combine & Minify CSS & JSS on the fly (Also tested in Umbraco) in 5 easy steps

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

  1. Copy the binaries to your bin folder and add references to them or include the project into your solution
  2. Copy and rename “HeadAdapter.browser.txt” to HeadAdapter.browser to your App_Browsers folder
  3. make the required changes to your web.config file
  4. change the combineAndMinify config attribute “active” from “Never” to “Always”
  5. 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:

CombineAndMinify_Dlls

HeadAdapter.browser.txt

web.config.txt

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.

Posted in .NET, Configuration, Development, optimisation, VB.


2 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. Charles says

    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!

    • Andre says

      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



Some HTML is OK

or, reply to this post via trackback.