Bundling in Asp.Net MVC

What Bundling is actually:

        It is a process of grouping files into a Bundle, so that they can be loaded through one HTTP request and can be referenced by a unique Bundle Name.

Need of Bundling:

        While developing a developer may use multiple JS or CSS files for more readability of code, maintainability of code,etc. which is a standard practice, but these multiple JS or CSS files require multiple HTTP requests which degrades the performance of the application. So in order to avoid this multiple HTTP requests, we Bundle all these files that can be loaded through one HTTP request.

How to achieve Bundling:

Let us understand this with the help of following example:-

       Let's say we have two Views and four JS files in our project (Index.cshtml , Create.cshtml) and (JS1.js,JS2.js,JS3.js,JS4.js) respectively. The Index.cshtml View requires JS1.js and JS2.js files whereas Create.cshtml requires JS3.js and JS4.js files.

       We cannot bundle all the four JS files into a single bundle as only two of them are required in one View and rest two in another View, also if we make only a single bundle then the View will get all the four JS files on HTTP Request this will also degrade the application performance as only two JS files were required. Therfore we will create two bundles one for Index.cshtml and the second for Create.cshtml.

       Inorder to create the Bundle keep all the JS files in a single folder say 'Scripts' folder and just go to BundleConfig.cs file in App_Start folder, and write the following code to Register Bundle:-

public class BundleConfig
    {

        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/index").Include(
                        "~/Scripts/JS1.js",
                        "~/Scripts/JS2.js"));

            bundles.Add(new ScriptBundle("~/bundles/create").Include(
                         "~/Scripts/JS3.js",
                        "~/Scripts/JS4.js"));
      }
  }

   Here we created two bundles one for Index.cshtml and one for Create.cshtml with name index and create respectively.
Now we can easily use these JS files with one HTTP request:

For example:
   For Index.cshtml

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

Hope it helps...!