Bundling and Minification in ASP.NET MVC

In MVC architecture, one new feature added which is bundling and minification. This is one of the optimization techniques for optimizing the page load time in the MVC application. Bundling and minification reduce the load time by reducing the number of requests to the server for CSS and javascript files and also by reducing the size of the files.

Most of the browser have a limit of request to the server for CSS and js files means for each hostname simultaneous request to the server is limited to six. The remaining request are added in Queue of the browser.

When we have given the many references of javascript files and CSS file on a single view, page load time increases as more files to be load. So for that problem, there is one solution i.e. Bundling and Minification.

In MVC we have to write c# code for bundling and minification in the file 

App_Start/BundleConfig.cs.

Please see below code to create a bundle of files:

using System.Web;

using System.Web.Optimization;

namespace FirstApplication

{

    public class BundleConfig

    {

        public static void RegisterBundles(BundleCollection bundles)

        {

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

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

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

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

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

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

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

                      "~/Scripts/bootstrap.js",

                      "~/Scripts/respond.js"));

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

                      "~/Content/bootstrap.css",

                      "~/Content/site.css"));

        }

    }

}

See in the above code, we have to use the add method of the “BundleCollection” class. In this collection, we can add script files and CSS files also.

And for rendering the scripts in bundle collection we use like below code

@Script.Render(“~/bundles/bootstrap”);

When this line executes in the browser, one request is generated for 2 files mentioned in 

bundleconfig.cs files.

Likewise for the style also we can render the same as below

@Styles.Render(“~/Content/css”);

See in the above example, the First statement of script bundle

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

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

It loads all files whose name start with jquery and whatever version it has. {Version} it is a wildcard bundling framework convention. When we use like this it will add all files with name start with jquery and its whatever the version of it.

In minification is by default done when we use bundling. Minification means minify the size of the file by removing white spaces and newlines from the js and CSS. So by default size of the file reduces and the performance of the page is increased.

For enabling Bundling and Minification in MVC application you have to set the property “EnableOptimizations” to true like below

BundleTable. EnableOptimizations = true;

And one more thing we have to keep in mind that to enable and disable bundling and minification in MVC application, we have to set debug property of Compilation element in web.config file to true or false respectively.

If this property is true and EnableOptimnizations is set to true then bundling and minification is enabled. If any one of the property is false then bundling and minification is disabled.