Home > DeveloperSection > Articles > Bundling and Minification in ASP.NET MVC 4

Bundling and Minification in ASP.NET MVC 4


ASP.NET MVC ASP.NET MVC 
Ratings:
0 Comment(s)
 6990  View(s)
Rate this:

Bundling and Minification in ASP.NET MVC 4

Bundling and minification are two techniques you can use in ASP.NET 4.5 to improve request load time.  Bundling and minification improves load time by reducing the number of requests to the server and reducing the size of requested assets (such as CSS and JavaScript.)

Bundling: It’s a simple logical group of files that could be referenced by unique name and being loaded with one HTTP requestor.

Minification: It’s a process of removing unnecessary whitespace, line break and comments from code to reduce its size thereby improving load times.

Most of the current major browsers limit the number of simultaneous connections per each hostname to six. That means that while six requests are being processed, additional requests for assets on a host will be queued by the browser.

Basically a developer uses multiple JS and CSS files for modularity, readability and maintainability of code and it’s a good practice too. But in some cases it leads to degradation of the overall performance of the website. Because multiple JS and CSS files require multiple HTTP requests from a browser leads to degrade the performance & load time of your web pages.

In real-time, almost every website uses Minification technique to improving their load times, but bundling is not used commonly because every page required different sets of files and the application will also not support as much to make it simpler.

Implement Bundling and Minification in MVC 4 application

 

Microsoft provides assembly Microsoft.Web.Optimization (Namespace: System.Web.Optimization) for Bundling and Minification, which is installed by default with new ASP.NET MVC4 application template as NuGet package.

For demonstration need some assemblies and namespaces, so I have open MVC 4 application with “Internet Option”.  Steps are given below.

Step 1: Open ASP.NET MVC 4 Application.

Bundling and Minification in ASP.NET MVC 4

Step 2: Select Internet Application option with Razor View.

Bundling and Minification in ASP.NET MVC 4

Step 3: Created two JavaScript,  tow Script file and view

Bundling and Minification in ASP.NET MVC 4 

Step 4: Here I have written some css for <h1> tag in StyleSheet_1.css and StyleSheet_2.css

StyleSheet_1.css

 

/*This code set h1 header tag color red*/

h1

{

       color:Red;

}

 

StyleSheet_2.css

 

/*This code set h1 header tag color red*/

h2

{

       color:Blue;

}

 

Step 5: Add style sheet on Index.cshtml file

Bundling and Minification in ASP.NET MVC 4

Step 6:  changed Globle.asax.cs for run demo view

Bundling and Minification in ASP.NET MVC 4

 

Step 7: Before starts implementing the Bundling and Minification technique, first inspect the actual performance of the web page using firebug (Firefox developer tool). This (firebug) is application of Mozilla and you can easily install.

Bundling and Minification in ASP.NET MVC 4

Step 8: Here we can see that Index.cshtml on CSS made two browser requests (StyleSheet_1.css, StyleSheet_2.css) and the response size is 139 B. Because I have not added any single line of code in Jscript_1.js and Jscript_2.js, so here we not describe Jscript file, but steps are same as CSS.

Step 9:  Now I’m going to implement Bundling and Minification in this project

Step 10:  Open Global.asax.cs and right click on “BundleConfig.RegisterBundles(BundleTable.Bundles);” and select “Go to Definition”.

Bundling and Minification in ASP.NET MVC 4

Step 11: Write below code in BunldeConfig.cs

bundles.Add(new ScriptBundle("~/js_bundle/js").Include("~/js/JScript_1.js.js", "~/js/JScript_2.js.js"));

 

 bundles.Add(new StyleBundle("~/css_bundle/css").Include("~/css/StyleSheet_1.css", "~/css/StyleSheet_2.css"));

 

Bundling and Minification in ASP.NET MVC 4

Step 12:  replace css and js link to below code from Index.cshtml

    @Scripts.Render("~/js_bundle/js")

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

 

 

Bundling and Minification in ASP.NET MVC 4

Step 11: Change debug="true" to debug="false" in Web.config file within system.web tag

Bundling and Minification in ASP.NET MVC 4

 

Step 13:Now project  is ready. But before run project, clean the browser history and see output in Firebug tool.

 

Bundling and Minification in ASP.NET MVC 4

 

Step 14: Compare Step 13 figure to step 7 figures. Let see, Here (Step 13’s Figure) only one request and file size reduce 139 B to 27 B. When we see in view source page some points are noted.

      1.      Two css file link converted into single link.

      2.       File path encripted.

      3.       Two file’s contents converted into single file.

      4.      Commented lines will we removed.

      5.       Size of file reduced.

Bundling and Minification in ASP.NET MVC 4

Bundling and Minification in ASP.NET MVC 4

I hope you enjoy this Article.

 


Don't want to miss updates? Please click the below button!

Follow MindStick