Although minifiers are great, they do represent an extra step that you have to take each and every time you deploy your code. Of course, you can automate the process by using post-build events in your IDE or by developing some scripts. However, the process I am about to show you will require zero effort on your part once implemented. The only downside to this technique is that you may increase your CPU utilization on your web server from running the "compression" algorithms. So it may be wise to monitor your CPU activity before and after you implement this code.
Before going any further, I want to point out that this solution is based entirely on the BlogEngine.NET source code. BlogEngine.NET uses the Microsoft Reciprocal License. If you are not familiar with the license but you are interested in using this code then please read the License page to make sure you are in compliance with the rules.
These class files did have a few sections of code that were specific to BlogEngine.NET so I had to strip them out to get my project to compile. Most of them were really just checking to see if compression was turned on or off because this is a configurable setting in BlogEngine.NET. I basically removed any conditional logic which checked if compression was enabled. This is really not a big deal because you can selectively choose what to compress from your HTML source; which I will demonstrate later on. Just for you information, I changed this code...
Once I got the source to compile, I moved on to the next part of the job which is registering the HttpHandlers in the web.config file. By registering the handlers you are effectively telling ASP.NET that anytime you encounter a URI with a "css.axd" or "js.axd" use the custom handlers:
<!-- to compress css and js files -->
<add verb="*" path="css.axd"type="CodeCapers.HttpHandlers.CssHandler" validate="false"/>
Finally, if you are using ASP.NET MVC, then you will also need to add a couple of lines to your Global.asax.cs file. This tells MVC to ignore requests made to css.axd and js.axd. In other words, we want MVC to get out of the way so the HttpHandlers can do thier work. Please note that in my application the css files are stored in the Content folder and js files are stored in the Scripts folder. If you are using different paths that you will need to modify your entries to match the structure of your application.
//for css compression
//for js compression
Finally, here is my master page with the updated references. Notice that the first and the last entry are utilizing the custom handlers. The other scripts are already minified so I did not bother modifying them. Like I mentioned earlier, we can control what gets passed through to the custom handlers directly in our HTML.
<link rel="stylesheet" href="/Content/css.axd?name=site.css" type="text/css" />
<link href="/Scripts/themes/overcast/ui.all.css" rel="stylesheet" type="text/css" />
Finally, I want to make sure that credit is given where credit is due. I did not do anything other than take an existing piece of code and modify it to work in my application. The BlogEngine.NET developers did all the real work, so they deserve all the credit.
Download the modifed files ==> CompressOnTheFly.zip (5.67 kb)