Meleze.web

Remove whitespace in ASP.NET Razor views

View the Project on GitHub meleze/Meleze.Web

Meleze.Web is a plugin for ASP.NET Razor that removes all the whitespace in .cshtml views.

For example, a view like:

<ul>
  <li>Item1</li>
  <li>@variable</li>
</ul>

is recompiled as:

<ul><li>Item1><li>@variable</li></ul>

Meleze.Web minifies the HTML markup and also the inlined CSS and Javascript elements when System.Web.Optimization or the Microsoft Minifier DLLs are loaded in the application.

Why is it better than a ASP.NET MVC view filter?

With a view filter, the minification would be performed each time the view is rendered. It means the filter adds a little cost to each HTTP request. Meleze.Web runs at COMPILE time. The views are minified only one time when Razor compiles the view. There is no minification cost when the view is rendered. It is even the opposite as the CPU has less characters to write. When minifying at compile time, you reduce the bandwidth usage and also the used CPU (arround 15% in my web applications).

Installation

To use the HTML Minification for Razor, you have to change your Views/Web.config to replace the default ASP.NET MVC factory by the Meleze's one:

<configuration>
  <system.web.webPages.razor>
    <host factoryType="Meleze.Web.Razor.MinifyHtmlWebRazorHostFactory, Meleze.Web, Version=1.4.0.5, Culture=neutral, PublicKeyToken=0a868b5321967eda" />
  </system.web.webPages.razor>
</configuration>

For ASP.NET MVC 3.0, use the 1.3 version of Meleze:

    <host factoryType="Meleze.Web.Razor.MinifyHtmlWebRazorHostFactory, Meleze.Web, Version=1.3.0.5, Culture=neutral, PublicKeyToken=0a868b5321967eda" />

There are two versions of the DLL: one for ASP.NET MVC3 and another for ASP.NET MVC4. Make sure to use the correct version (it is displayed in the DLL description).

Making this change in the Web.config may break Intelliscense in Visual Studio if it does not find the Meleze.Web dll.

There are two solutions:

  1. You can setup the factory in Web.config.Release instead of the Web.config. The minification will be enabled only in release build.
  2. Otherwize, you can register the Meleze.Web dll in the GAC using "gacutil.exe -i Meleze.Web". The minification will work even in design mode.

The Minifier behavior can be configured in the application's root Web.config with some appSettings keys:

<appSettings>
  <add key="meleze-minifier:Aggressive" value="true"/>
  <add key="meleze-minifier:Comments" value="true"/>
  <add key="meleze-minifier:Javascript" value="true"/>
  <add key="meleze-minifier:CSS" value="true"/>
</appSettings>

meleze-minifier:Aggressive removes as much whitespace as possible. In some cases, you may have to change yours CSS to fix the page layout (as whitespace is not interpreted in a compatible way by all browsers). meleze-minifier:Comments removes all the HTML comments that are neither Javascript code or conditional comments. meleze-minifier:Javascript calls the Microsoft Ajax Minifier. The AjaxMin.dll must be in the application references for this option to work (otherwise, JS is kept as is). meleze-minifier:CSS also calls the Microsoft Ajax Minifier to minimize the inline styles.

There is also a NuGet package to setup the Minifier automatically in your applications.

Release Notes