Bundling and Optimization in MVC

.Net can be defined as a Microsoft Operating system platform which incorporates applications, tools and web services. MVC and .Net framework offers bundling and optimization techniques that reduces the number of request to the server as well as the CSS library size. Minification and bundling go hand in hand with the help of dll. Similar techniques are also used with Asp.Net MVC3 and .Net framework 4.0. What is bundling? Bundle is defined a compilation of files loaded with a single HTTP request. Style and script bundle can be created for CSS and JavaScript by calling a command of Bundle Collection class Add() method with in BundleCOnfig.ca file.

Style Bundle

1. Add(new StyleBundle(“~/Content/css”).Include(“~/Content/site.min.css”,

1. “~/Content/mystyle.min.css”));

Script Bundle

1. bundles.Add(new ScriptBundle(“~/bundles/jqueryval”).Include(
2. “~/Scripts/jquery-1.7.1.min.js”,
3. “~/Scripts/jquery.validate.min.js”,
4. “~/Scripts/jquery.validate.unobtrusive.min.js”));

The above mentioned bundles are defined with BundleConfig class:

1. public class BundleConfig
2. {
3. public static void RegisterBundles(BundleCollection bundles)
4. {
5. bundles.Add(new StyleBundle(“~/Content/css”).Include(“~/Content/site.min.css”,
6. “~/Content/mystyle.min.css”));
7. bundles.Add(new ScriptBundle(“~/bundles/jqueryval”).Include(
8. “~/Scripts/jquery-1.7.1.min.js”,
9. “~/Scripts/jquery.validate.min.js”,
10. “~/Scripts/jquery.validate.unobtrusive.min.js”));
11. }
12. }

Creating Bundle with the help of “*” Wildcard character

“*“ is known as wildcard character that is basically used to connect files present in the same directory having same prefix and suffix in its name. For example you want to add all the script files existing within “~/Script”   directory that also has “jquery” as prefix. Then the following bundle link can be created.

1. bundles.Add(new ScriptBundle(“~/bundles/jqueryval”).Include(“~/Scripts/jquery*.js”));

CSS that exist between “~/Content” directory having “.css” extension as suffix can also be added.

1. bundles.Add(new StyleBundle(“~/Content/css”).Include(“~/Content/*.css”));

 

 

Registration of the bundle

Application_Start registers all the bundles of the web application

1. protected void Application_Start()
2. {
3. BundleConfig.RegisterBundles(BundleTable.Bundles);
4. // Other Code is removed for clarity
5. }

Minification

Removal of unwanted characters as well as comments from the JavaScript and CSS is termed as minification. Minification reduces the size and enhances load time of the webpage. A number of tools are present for minifying js and CSS files.

Performance Optimization

A performance test on a MVC4 application depicts that minification and bundling helps to enhance it. The following table depicts the impact of binding and minification.

The table shows that bytes have significant reduction while bundling takes place. Though the received bytes reduction isn’t that large as the largest files are already being compressed. One thing should be taken care of while bundling and that is bundles are to be partitioned by pages according to the requirement.