RSS

Pre-Bundling and Pre-Minification in ASP.NET

26 Jun

There are number of bundling and minification libraries available for asp.net/asp.net MVC applications. Following are few I have come across with.

• Microsoft ASP.NET Web Optimization Framework – Available as a nuget package
• WebGrease – Available as a nuget package.
• Request Reduce – Available as a nuget package, supports external resources, Also supports Less, SASS and Coffee Script.
• Packer
• Closure compiler
• JSMin
• SquishIt
• Combres
• Cassette – Also compile CoffeeScript & LESS

What is the one common limitation with these libraries?
However almost all above libraries require you to do initial bundling configuration in application before requests are being made. Then write directives in your views to render the configured bundles.
Following is what you would typically do in this instance it is ASP.NET MVC bundling… Similar kind of code needs to be put with other libraries.

public static void RegisterBundles(BundleCollection bundles)
{
     bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                 "~/Scripts/jquery-{version}.js"));
         // Code removed for clarity.
}

Then in your views you refer to these bundles.

 @Scripts.Render("~/bundles/jquery");

This is almost always ok but there are situations where this is not what the problem to be solved e.g. think about dynamically driven multi-site CMS handlers. These CMS handlers do host probably thousands of microsites inside their own one single abstract parent site handler. If we try to configure bundling with these it becomes impossible to use this approach or will become huge burden and will make things much slower.

I recently helped to one of my colleague to solve similar situation. Requirement was really simple in the admin panel you just select set of files for one of your micro-site and then it will generate bundled and minified output file.

Library I used for this was YUICompressor.NET which available as a nuget package. This is a .NET port of the Yahoo! UI Library’s YUI Compressor Java project. It can be installed as below to your project.

yui-compressor

You can write code similar to following to get compressed and minified output.

var cssFiles = Directory.GetFiles(Server.MapPath("~/CMSSitePath/1260/css-uploads"));

StringBuilder sb = new StringBuilder();			
foreach (var cssFile in cssFiles)
{
     sb.AppendLine(System.IO.File.ReadAllText(cssFile)); //make sure using AppendLine instead of Append of string builder
}
			
var compressedCss = new CssCompressor().Compress(sb.ToString());
System.IO.File.WriteAllText(Server.MapPath("~/WebSites/1260/css/main-css.min.css"), compressedCss);

As you can see above code is a very simple and naïve approach for solving the problem. Make sure to use AppnedLine of string builder instesad of Append this will be specially helpful for JavaScript otherwise you might end up with minification errors for some javsacript files. For demo purpose many additional error checks, configuration and streams has not been used. But you get the idea. Anyhow practically since the output is a bundled file that must be loadable in web browser without spending much time even the above code will be sufficient to handle production requirements no need for streams to read files (since input file contents are relatively less than 1mb most of the time).

Advertisements
 
Leave a comment

Posted by on June 26, 2015 in ASP.NET, ASP.NET MVC, C#

 

Tags: , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: