How asp.net Bundling works internally

Question

I am curious to know how asp.net bundling works.

I know we've to add the all scripts and css and images to the bundle so that browser will initiate single request for all the resources.

I 've some confusion how the pages will refer these bundled resources from client browser.

Answer 1

Let's take a look at what happens when we use the bundling in System.Web.Optimization.

In this example I used the "Empty ASP.NET MVC 4 template" and grabbed the latest "Microsoft.AspNet.Web.Optimization" package from nuget.

I then proceeded to register 2 javascript files. One for jquery and another for bootstrap.

public static void RegisterBundles(BundleCollection bundles)
{
    var javascriptBundle = new Bundle("~/bundles/javascripts")
        .Include("~/Scripts/jquery-{version}.js")
        .Include("~/Content/bootstrap/js/bootstrap.js");
    bundles.Add(javascriptBundle);
}

Now that we have our setup done, let's see what happens when we view the page.

You can see that both the javascript files were just included as we would normally do. This is what happens when you have the "debug" flag set in your web.config.

Let's turn this to false and see what happens now.

Now what we see is a single reference was added but with a very unique looking location. By clicking on it, we see that it spits out a minified and combined version of both of the javascript files that were referenced in our bundle.

This funny query string parameter v=loMmcAiXrKwMoVsM8Ok8Q5jVmuFQUI3fiiRVJQC33Hs1 is a reference to our content and we can see that no matter how many times we hit the website, it's going to stay the same. (i.e. refreshing multiple times).

Let's see what fiddler says about the reference to our javascript files.

We can see that the response is cachable. The cache expiration has been set for "Wed, 26 Mar 2014 06:49:06 GMT". Almost a year from today.

Subsequent requests to the resource will get read from the browser's cache. "This HTTP/304 response indicates that the existing cached response remains fresh. Cache-lifetime headers on a HTTP/304 response may be used to update the cached response's freshness."

If you require any more information, see also http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification