Bundles in ASP.NET MVC in ASP.NET MVC

Script and Style bundles are defined in ~/App_Start/BundleConfig.cs file and can be used in Layout and View pages.

bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"));

bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

In order to work with Bundles, we need to use System.Web.Optimization namespace.

In above code snippet, we have defined "~/Content/css bundle that renders bootstrap.css and site.css. The other bundle renders .js file whose name starts with modernizr....

ScriptBundle and StyleBundle can be used in the view like this

@Styles.Render("~/Content/css")

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

The output of above code snippet would look like below in the web page source

In case debug mode is "false" in web.config file  or BundleTable.EnableOptimizations = true; is set in the BundleConfig.cs file

<link href="/Content/css?v=MDbdFKJHBa_ctS5x4He1bMV0_RjRq8jpcIAvPpKiN6U1" rel="stylesheet"/>

    <script src="/bundles/modernizr?v=wBEWDufH_8Md-Pbioxomt90vm6tJN2Pyy9u9zHtWsPo1"></script>

This renders the .optimized css and .js file ie. any comment, alignment  in the .css and .js file is removed to make the file size less so it loads quickly. As the StyleBundle has added two .css file so both file will be merged into one and loaded into browser to redule the number of requests on the server to load both files. This intern helps to increase the performance of the web page.

In case debug mode is false

<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>

    <script src="/Scripts/modernizr-2.6.2.js"></script>