How to setup bundles using CDN in ASP.NET MVC?

The optimization package in ASP.NET MVC framework has built-in support for Content Delivery Network (CDN). Using CDN can improve the performance of your application. The trick is to use it for popular libraries where the chances are that those libraries may have been cached by user’s browser. For example: jQuery, Angular, Modernizr, etc. In this post, I’ll tell you how to setup bundles using CDN in ASP.NET MVC application with a fallback support.

What is CDN?

A content delivery network or content distribution network (CDN) is a globally distributed network of proxy servers deployed in multiple data centers. The goal of a CDN is to serve content to end-users with high availability and high performance. CDNs serve a large fraction of the Internet content today, including web objects (text, graphics and scripts), downloadable objects (media files, software, documents), applications (e-commerce, portals), live streaming media, on-demand streaming media, and social networks.
Wikipedia

If you would like to learn the basics of this feature, you may read my post where I explain how to bundle, minify web resources in your application. The concept explained in that post is same that applies to an application with or without Areas.

It is very easy to instruct optimization framework to set up CDN for a specific bundle. Look at the code below which uses CDN source for jQuery and Bootstrap:

This can also be applied for StyleBundle as well. The parameter that takes the CDN link is optional in both the bundle types.
Note: Using CDN in bundles is supported only at the top bundle level.

It is a good practice to always specify the local scripts and styles that should always be provided. This can eliminate necessity of CDN for development. It also allows to flip between using CDN at any time if required.

You may be surprised that just by adding the code above will not enabled CDN for that bundle. Ensure that

  • CDN path is provided for a bundle
  • Optimizations are enabled either programatically or when compilation is set to false in web.config file.
  • UseCDN property is set to true as default is false.

So, the code will look like the snippet below:

CDN Fallback support

There can be times when the CDN is not available or requested file from a third-party server may not have that file. Our application must not depend solely on a CDN. Instead we should always provide a fallback support by providing a local css or script from server. This can be enabled by using CdnFallbackExpression of bundle type to a JavaScript expression that will be evaluated after a request to the CDN. If the result of this expression is false, then a script reference to the file on the server will be added to HTML document.

If you run the application and disable your internet connection so that the CDN link’s request fails, the HTML source for the bundle above will look like this:

In case of jQuery, when this library is loaded in the browser, it gets attached to the window object. So whenever the CDN link will fail to get a response, the expression will evaluate to false. This will result in browser request for the bundle that will serve the file from the server.

This sums up this post that tells how to setup bundles using CDN in ASP.NET MVC. Read the official documentation to explore more about this feature.

Siddharth Pandey

Siddharth Pandey is a Software Engineer with thorough hands-on commercial experience & exposure to building enterprise applications using Agile methodologies. Siddharth specializes in building, managing on-premise, cloud based real-time standard, single page web applications (SPAs). He has successfully delivered applications in health-care, finance, insurance, e-commerce sectors for major brands in the UK. Other than programming, he also has experience of managing teams, trainer, actively contributing to the IT community by sharing his knowledge using Stack Overflow, personal website & video tutorials.

You may also like...

Advertisment ad adsense adlogger