How To Use Bundling In MVC ASP .Net

Microsoft is all about amazing things. Here in this article we will learn about bundling that Microsoft has introduced in ASP .NET 4.5 Framework. We will learn more about bundling, its advantages and why we need it.


What Is Bundling?

In a web application when we reference different files of JavaScripts and style-sheets, the browser sends individual requests to the server to fetch them. From ASP .NET 4.5 onward the developer will have the ability to create bundles of .js & .css files together so that the .js files are fetched in a single request from server. Bundling not only create a single entity but also minify all the content present in the bundles. This improves the performance of requests and requests are completed in a single go.

What Bundling Does?

  • Clubs the files together to form a single file per bundle. 
  • A bundle may contain many files, but a single request bring whole bundle irrespective of the number of files present in it.
  • Javascript Bundles and Stylesheet bundles are different.
  • All the file content is minified in size by removing extra spaces, commented texts and shortening the names of scoped variables.
  • It becomes easy for developer to reference a set of files through single file thus making the code clean and more readable.

BundleConfig.cs

Shown below is the BundleConfig.cs file present in a default MVC5 application.


RouteConfig.cs of a MVC5 ASP .Net Application


This file contains RegisterBundles() method which is being called at Application_Start() event by global.asax.cs file. This RegisterBundles() method contains all the bundles created in the application.

Notice that this method has a parameter bundles, it is of type BundleCollection class. All the bundles created are added to this bundles parameter at the start of the application.

*For scripts(.js files) we use ScriptBundle as you can see in above image.
*For stylesheets(.css files) we use StyleBundle class.

This ScriptBundle/StyleBundle class takes the name of the bundle and then we can include multiple files to a particular bundle as per our choice.

In the above image the first line in method declares a bundle with the name of ~/bundles/jquery and 
~/Scripts/jquery-{version}.js is included in it. Here bundling system is smart enough to reference highest version of jquery file when we specified {version} selector in path. Also this bundling system is smart enough to pick the minified version of file if available at the defined path.
Also there is a wildcard selector '*' in ~/bundles/jqueryval at ~/Scripts/jquery.validate*, this selector tells the system to pick all the files whose name starts with text 'jquery.validate'. So this bundle will have all the files picked up like jquery.validate.js & jquery.validate.unobtrusive.js

BundleTable.EnableOptimizations = true;
This line states that system has to minify the bundles, however if you are working in Dev Mode and want to debug un-minified scripts then you can set this to false, or make it config key driven.

How Bundles Are Used?

Once we have specified bundles in our RouteConfig.cs, we can use a reference to these bundles in our views. Here as we are referencing a default MVC5 VS2013 app, we have these bundles referenced in our _Layout.cshtml  page. Shown below is the snippet from this file.


Using Bundles in a MVC5 ASP .Net Application


However we can also use these bundles reference in any of our view in similar fashion.


Network Requests For Bundles

Shown below is the network request for a default MVC5 ASP .Net application. First part shows the requests made without minification and bundled requests. The calls are multiple and are greater in size, thus taking longer time. Whereas in second part the response is after bundling and size and response times are less. Also as seen in BundleConfig.cs, respond.js & bootstrap.js are clubbed together after bundling.


Request Timing when using Bundling in a MVC5 ASP .Net Application



So that's all about bundling in MVC, you should use it. It's clean and more futuristic.

We are eager to hear from you, keep posting your valuable comments.

Happy Learning!!!

Comments

Post a Comment

Hey there, liked our post. Let us know.

Please don't put promotional links. It doesn't look nice :)

Popular posts from this blog

Create Android Apps - Getting Started

Image
Cheezy Code - Just Maths App Want to build Android Apps really fast? With Android Studio and a blend of Java and XML, you will be up and running and coding Great Android Apps in no time.  Let's get started. We will be creating a very simple app named Just Maths that will ask user a Maths question. User either presses (✔) or (X) to answer the question. This is going to be a project based learning wherein you will have something concrete in the end.
Read more >>

Kotlin Type Checking and Smart Cast with Examples

Image
  Type Checking in Kotlin For certain scenarios, we need to check the type of the object i.e. we need to identify the class of the object before executing any function on that object. Consider a scenario where you have different types of objects in an array. You are looping on that array and executing some functionality. If you call a method that does not exist in the object, an error will be thrown at the runtime. To prevent such errors, we do type checking. In Kotlin, we have an  " is operator"  that helps in checking the type of the object. fun main() { var p1 = Person() if(p1 is Person) // Use of is operator { p1.sayHi() } } class Person{ fun sayHi() = println("Hi") } Explanation -  Here, we are checking the type of p1 instance that if it is of type Person - call its sayHi() method. In this case, it is evident that the object is of type Person only but for scenarios where we need to check the type - we use an "is operator".
Read more >>