Resource Bundling in ASP.NET - You've got options

A few months ago, I got very interested in making web applications smaller, lighter and faster. This led me down multiple roads for which I am grateful.

Cross Roads

I got to create this neat little library, which I'll be talking about later.

See, I was convinced that even though for currently thriving platforms like NodeJS, there were multiple ways to bundle css and js resources such as grunt and gulp to name a few, there were very few options if you were working with ASP.NET.

Where I got this weird idea from, I have no idea, but it may have come from the fact that with ASP.NET's System.Web.Optimization library, it basically had bundling built in.

This should mean that resource bundling in ASP.NET is kinda covered for, yea?

No, unfortunately, it doesn't.

Let's take a look at possible ways to perform resource bundling in our beloved classic ASP.NET, yea?

Using the BundleConfig.cs

Using the BundleConfig.cs file, you can create neat little Bundles, then add them to BundleCollection.

public static void RegisterBundles(BundleCollection bundles)  
        {
            bundles.UseCdn = true;
            BundleTable.EnableOptimizations = true;
            var angularBundle = new ScriptBundle("~/bundles/angular").Include("~/js/angular/angular.js",
            "~/js/angular/angular-sanitize.js");
            bundles.Add(angularBundle);
        }

In your view you can render the bundle as @Scripts.Render("~/bundles/angular") and you have your angular files in one small file.

Life is easy peasy, or that's what you think.

See, when you use the System.Web.Optimization library to bundle resources, it stores the bundled content in the application's cache, which means that bundling takes place on Application Startup, which means slower load time for your application on startup.

If your goal is fast load times, the time saved by bundling resources is basically eaten up by the processing involved in bundling at Application Startup.

Wasn't there something like grunt, gulp, or some other sound-made-from-the-throat-sounding-tech that could minify and bundle my files when I built my applications, so bundling was done at compile time and not load time???

I found Bundler and Minifier

Chilas has been trying to make me use Web Essentials for quite a while. Apparently, it's the secret behind the magic he seems to do with code every time I look at his screen with envy.

I'm just worried about messing up my pretty-okay development environment with some extension I'm not sure I can't do without.

So when I heard Web Essentials let me do what grunt and gulp did for NodeJS people, I was tempted.

But then, I found out Web Essentials had decoupled its bundler and made it into a sweet visual studio extension called "Bundler and Minifier".

It was the promised child, and I soon installed it, hoping for some awesome magical exploits.

Gandalf doing magic

The magic came when my visual studio began freezing every time I made a save.

I'd have to stop the application using Task Manager. It was annoying to have to restart Visual Studio just because an extension wasn't being true to its promises.

I admit, I probably gave one less star than it deserved in my review of it.

I wouldn't give up though, I was going to try to make it work as it was the closest I had come to having sweet bundling at my literal fingertips while working with ASP.NET.

Chilas pointed out that the extension let you convert your config to use gulp. I had seen this before, but why gulp? This is ASP.NET, not NodeJS. Yea, I'm a bit of a purist that way.

In the end, I agreed to try it, and with one click, Visual Studio discovered I didn't have gulp installed, it got it in minutes, and its Task Runner was bundling my files on save, without any extra configuration.

Task Runner Bundler and Minifier up and running beautifully

Bottom Line is, if the default run-time bundling doesn't do it for you, just like it wasn't the perfect choice for me at the time, you've definitely got other options, whether it's the classic VS-crashing bundler and minifier, grunt, gulp or even this tiny little guy

Show Comments