Bundling and Minification in ASP.Net 4.5

 

Bundling and Minification

 

There is a lot of buzz now a days around this and definitely it is worth to know about this fabulous concept introduced by Microsoft which drastically improves the performance of the page. Even though it is bit late to come up with this but still it is good that Microsoft has come up with this concept.

 

As a developer we always see or have many number of Javascript and Style sheet files that we use in our pages and we always have these in multiple files which is recommended to have better maintainability.

But this also adds up to performance issue because of no round trips that needs to be made to server in order to fetch the data from server.

Now a days all the browsers are restricting their browsers to serve only 6 requests at a time per host. If you observe the below figure you can observe that first 6 resources are been requested and others are under waiting to get their turn to perform the request.

Red Bars indicate that the request is queue by browser waiting for the six connections to be completed.

 

Bundling

Bundling is a new concept that’s has come up now which drastically reduces the no of hits made to server and proportionately the time taken to perform the request. It converts the chunk of files to one file and you see that it makes a single request to acquire entire folder data. The following sample is based on MVC application but the same can be achieved in normal ASP.Net web application.

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"));

        }

    }

 

So if you observe the above code we have a class by name BundleConfig(Could be named anything) and we have a static method saying RegisterBundles which takes existing bundle collection as input and updated the new bundles.

If you observe the following code line

bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));

 

You can notice that we have class called ScriptBundle and in which we are passing ("~/Scripts/jquery-{version}.js”) this notates that we are create a bundle by name "~/bundles/jquery" and we are including all the files in scripts folder which matches the pattern “jquery-{version}.js”

 

Similar logic with all other bundles. Once we are done creating bundles we need to include them to application to access them where ever we want. In Global.asax we need to register this bundles as shown below.

 

    public class MvcApplication : System.Web.HttpApplication

    {

        protected void Application_Start()

        {

            AreaRegistration.RegisterAllAreas();

 

            WebApiConfig.Register(GlobalConfiguration.Configuration);

            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);

            RouteConfig.RegisterRoutes(RouteTable.Routes);

            BundleConfig.RegisterBundles(BundleTable.Bundles);

            AuthConfig.RegisterAuth();

        }

    }

 

 

And once it is done we can use them where we want to call them. As shown below this can be used in cshtml

 

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

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

Also note that you need make compilation debug attribute set to false if bundling to be active.

 

  <system.web>

    <compilation debug="true" targetFramework="4.0" />

Look at the screen shot below which gives clear picture about how it reduced drastically the no of hits made to server.

 

 

 

 

Minification

 

I create a sample function as shown below

function TestFunction(BigVariable, VeryBigVariable) {

    return BigVariable + VeryBigVariable;

}

 

And when you execute the page and look at developer tools search for TestFunction you can see that it minifies the variable names to smaller ones like as shown in the screen shot is has converted BigVariable to “n” and VeryBigVariable to “t” and also reduces the extra spaces as shown below.

This way it really redcues the size of file and also makes it very lighter weight to download.

 Hope this helps.