CDN fails, but your scripts don’t have to – fallback to local jquery

Bundling with Asp.Net MVC

If you are working on Asp.Net either Web Forms or MVC, you would have come across Bundling & Minification of JavaScript & Css files.

Background:-

There are hardly any applications which don’t use JavaScript or Css files and as our application grows, we tend to split these files logically into multiple files. We then include each file individually on the HTML page which is sent to the browser. The browser then resolves the dependencies on these files by making the request to the server for each file which can slow down the loading of your page.

In .Net 4.5, a powerful tool was launched which allows you to bundle multiple files into one file, which then downloaded by the browser in one single request to the server. Below how it works:-

A typical example of defining a bundle in BundleConfig.cs is given below:-

  bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(

                        "~/Scripts/jquery.unobtrusive*",

                        "~/Scripts/jquery.validate*",

                        "~/Scripts/requiredif-validation.js"));

The code above just creates a new instance of ScriptBundle and assigns it the virtual path as "~/bundles/jqueryval". It then invokes the include method to specify which files should be included in the bundle.

Now that the bundle is registered, we can reference it in the views using below statement:-

@Scripts.Render("~/bundles/jqueryval")

Now, before you run this, you should know that, by default, in debug mode bundling is switched off to enable developers debug the files if they want to. Although you can override this behavior either from web.config by changing the value of debug to false as shown below:-

<compilation debug="false" targetFramework="4.5" />

Or override these settings by writing below line in BundleConfig.cs:-

BundleTable.EnableOptimizations = true;

Once you do that, next time you run the application, you should see something like below as the file included on your page on browser:-

<script src="https://yoursitename.com/bundles/jqueryval?v=JzhfglzUfmVF2qo-weTo-kvXJ9AJvIRBLmu11PgpbVY1"></script>

Using CDN with bundling:-

In above example, we created a bundle which loads all files from our server but what if you wish to load files from CDN. Files like JQuery are so commonly used that they are available on almost all CDNs & loading these files from CDN can noticeably improve the load time of your web page.

Let’s see how it can be implemented.

First, the declaration of bundle for a CDN changes as shown below:-

var jqueryBundle = new ScriptBundle("~/bundles/jquery", @"https://ajax.ggleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js").Include(

                "~/Scripts/jquery-{version}.js");

bundles.Add(jqueryBundle);

Above we did two things; first we defined the CDN location of the file and then the local version of the same file. In debug mode, the local version will be used and in Release mode, the CDN version will be picked.

The second step is to enable the CDN usage in RegisterBundles method by adding below line:-

bundles.UseCdn = true;

Once this is done, the CDN version will be used in Release mode and the local version will be used in debug mode which obviously as I stated earlier, you can override it.

Now this is all good but whenever you use some third party things in your application, you always have to plan for the failures i.e. in this case let’s say either CDN is down or the file is no longer hosted there. You can't let this break your web page and hence you need a fallback option. Luckily, this is available with bundling in Asp.Net MVC.

Bundling with fallback:-

You can do few extra things in above CDN bundling code to enable fallback which then pick these files from your server in case of CDN failure.

First, add the CdnFallbackExpression in the bundle as mentioned below:-

  var jqueryBundle = new ScriptBundle("~/bundles/jquery", @"https://ajax.ggleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js").Include(

                "~/Scripts/jquery-{version}.js");

jqueryBundle.CdnFallbackExpression = "window.jquery";

bundles.Add(jqueryBundle);

Here you just define a JavaScript method which will be called if it fails to load the file from CDN. You then need to implement this JavaScript method and load the file from your own server as shown below:-

<script>(window.jQuery)||document.write('<script src="/bundles/jquery"><\/script>');</script>

The basic idea for CDN fallback is to check for a type or variable that should be present after a script load, and if it's not there, try getting that script locally.

Once you do this, you are ready to use the bundling with CDN with successful fallback applied and you can be 100% sure that you web page will get the files it needs from one source or another.