Bundling new feature in ASP.NET MVC 4

Why need of bundling?

When we want to use any javascript and or CSS we include it in page one after other like follows -

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/someJavascript1.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/someJavascript2.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/someJavascript3.js")" type="text/javascript"></script>

…..

When we access the page browser needs to load this page to load this page browser needs to load all of the above links for CSS and JavaScript's. To load these files browser creates HTTP request for each one of them. Page is not fully loaded until each of these are loaded and as number of references increases page load time increases and performances decreases.  Problem here is number of HTTP request by browser increases, if we reduces number of HTTP requests we can increase the performance.

Bundling in ASP.NET MVC 4?

ASP.NET  MVC has namespace system.web.optimization which provides this bundling feature. Bundle is logical group of files that can be referenced by name and can be loaded by a single HTTP request. In case of ASp.NET MVC 4 project you will see following line in page _Layout.cshtml

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

Here ~/bundles/jquery is the bundle name, When browser render this page it only sends one HTTP request but loads all file. So number of HTTP request is reduced and hence load time is also reduced.

Where do we Register bundle name?

From above we have seen that bundling can help improving performance; Let us see how to register the bundles in ASP.NEt MVC 4. If you look at the global.asax.cs  then you will find function Application_Start

        protected void Application_Start()

        {

            AreaRegistration.RegisterAllAreas();

            WebApiConfig.Register(GlobalConfiguration.Configuration);

            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);

            RouteConfig.RegisterRoutes(RouteTable.Routes);

            BundleConfig.RegisterBundles(BundleTable.Bundles);

            AuthConfig.RegisterAuth();

        }

Highlighted line is the call to  method RegisterBundles in class BundleConfig this method define / register all bundles, You will find this class under folder App_Start.

Let us see the code inside this class.

    public class BundleConfig

    {

        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725

        public static void RegisterBundles(BundleCollection bundles)

        {

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

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

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

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

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

                        "~/Scripts/jquery.unobtrusive*",

                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're

            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.

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

                        "~/Scripts/modernizr-*"));

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

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(

                        "~/Content/themes/base/jquery.ui.core.css",

                        "~/Content/themes/base/jquery.ui.resizable.css",

                        "~/Content/themes/base/jquery.ui.selectable.css",

                        "~/Content/themes/base/jquery.ui.accordion.css",

                        "~/Content/themes/base/jquery.ui.autocomplete.css",

                        "~/Content/themes/base/jquery.ui.button.css",

                        "~/Content/themes/base/jquery.ui.dialog.css",

                        "~/Content/themes/base/jquery.ui.slider.css",

                        "~/Content/themes/base/jquery.ui.tabs.css",

                        "~/Content/themes/base/jquery.ui.datepicker.css",

                        "~/Content/themes/base/jquery.ui.progressbar.css",

                        "~/Content/themes/base/jquery.ui.theme.css"));

        }

    }

In above code highlighted part create a new JavaScript bundle with name ~/bundles/jquery that contains all scripts files from the folder Scripts that matches pattern  jquery-{version}.js

Creating your own bundle

You can simply create your own bundle by creating object of class Bundle and adding your files to it. Once that is done you need to add your class to bundleCollection.

 

References

http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification