Tore Lervik

Minifier.Mvc

Minifier.Mvc is a small library for minifying html in ASP.NET Mvc applications. The package allows for compression while maintaining speed.

Optimization in regards to the web can be done in many ways, and I have talked about some of the options earlier in my Optimizing without drawbacks article. 

The challenge

Optimizing and minifying html is a challenge because the syntax allows for alot of variation and different meanings. While css and javascript have strict rules, the rules of html are somewhat more diffuse. 

// Remember to not minify content within textarea or pre tags
<textarea>content with some\r\nline breaks and\r\n more content</textarea>

// This is fine
<div>content</div> <div>other</div> -> <div>content</div><div>other</div>
// This is not
<button value="Cancel"/> </button value="Send"/> -> <button value="Cancel"/></button value="Send"/>

The methods

The library contains two methods, a complete and a quick minifier. The reason for this is that Mvc3 renders static parts of the view at first use, but there are still some optimizations that can be done when you have the complete html.

Complete()

Runs matches trying to remove as much of the usual whitespace in ASP.NET applications as possible. The method is designed to work with chunks of html that the razor view engine outputs.

Examples of input -> output

// This should not be minified since we have no way of knowing what type of tag it's inside
"\r\n some content\r\n " ->  "\r\n some content\r\n "
"\r\n" -> "\r\n"

// This we can safely minify
"<div>content</div>\r\n <div>more</div>" -> "<div>content</div><div>more</div>"

When ASP.NET render a view in Mvc3, the first thing it does is to compile the chunks of static html between the dynamic razor tags. This result in the method only beeing called once per view while the result persist for every request. This is also the reason why this method is allowed to use more time.

Quick()

This method runs a small set of quick matches trying to remove the whitespace that is left after ASP.NET rendered the complete html. This method runs on each request so it needs to be fast, and so it doesn't contain more than a couple methods.

Usage

Add a reference to Minifier.Mvc from your NuGet package manager.

After installing you get two things

  • The first is a reference to the quick method in your App_Code/AppStart_Minifier.cs file, this registers the quick method to run on each request.
  • The second is a new line in Views/Web.config called <host factoryType="Lervik.Minifier.Mvc.MinifyHtmlWebRazorHostFactory" />, this one registers the complete method to run when razor is compiling static html.
    Note: It's important that you comment out the old <host factorytype=""/> value, or the application will throw an exception. 

Summary

I have designed this package to work on the usual whitespaces created when building ASP.NET applications. The idea is for it to be lightweight and fast, while still removing as much as possible. If you look at the source of this page you will find that it uses the package to compress the html while the response time still rocks! :)

I hope that you find use for the package, and let me know if you find any html issues that it isn't handling. :)