I’m not going to tell anything new, but I just like to share one of the new feature “Bundling and Minification” in ASP.NET MVC 4.
Before starts, let me give a short note on Bundling and Minification in JS/CSS files
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.
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.
Bundling and Minification in ASP.NET MVC 4
In ASP.NET MVC 4 - 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. It allows the application to minify and bundle the files on the fly.
Here we will see how to implement Bundling and Minification in MVC 4 application.
For the sake of the demo, I will use four dummy JS files (JS-File-1.js, JS-File-2.js, JS-File-3.js and JS-File-4.js) to measure the performance of the sites.
To get started, Create new ASP.NET MVC 4 Web Application.
Then create a new controller (DemoController). In real-time every web site requires different JS and CSS for every page, so I create two new views from DemoController (Index.aspx and Create.aspx).
- Index.aspx will refer JS-File-1.js, JS-File-2.js
- Create.aspx will refer JS-File-3.js, JS-File-4.js
Before starts implementing the Bundling and Minification technique, first inspect the actual performance of the web page using firebug (Firefox developer tool).
Here we can see that Index.aspx made two browser requests (JS-File-1.js, JS-File-2.js) and the response size is 409.9 KB, similarly Create.aspx made two browser requests (JS-File-3.js, JS-File-4.js) and the response size is 427.2 KB.
To enable default bundling, open global.asax.cs and in Application_Start events write following lines.
Create Default Bundle
To enable the default bundle, remove the JS/CSS reference in the view and add the below lines of code to refer the bundle path.
But the problem here with the default bundling is that it will refer/download all the files in that folder at the time of browser requests.
The above figure shows that Index.aspx requires JS-File-1.js, JS-File-2.js and Create.aspx requires JS-File-3.js, JS-File-4.js, but the default Minification technique, minify and bundles all the files in that folder. To overcome this kind of issue, Custom Bundle is introduced.
Create Custom Bundle
In my scenario I need two sets of bundle, one for Index.aspx and another for Create.aspx, so I create two bundles in Application_Start event.
Bundle indexBundle = new Bundle("~/IndexBundle", typeof(JsMinify));
indexBundle.AddFile("~/Scripts/Demo JS Files/JS-File-1.js");
indexBundle.AddFile("~/Scripts/Demo JS Files/JS-File-2.js");
Bundle createBundle = new Bundle("~/CreateBundle", typeof(JsMinify));
createBundle.AddFile("~/Scripts/Demo JS Files/JS-File-3.js");
createBundle.AddFile("~/Scripts/Demo JS Files/JS-File-4.js");
And the below code is used to refer in respective view.
Here we go, now run the website and inspect the webpage (Index.aspx and Create.aspx) performance once again.
Now you see the above figure, Index.aspx makes only one browser requests and response size in only 217.3 KB. Previously it was 409.9 KB (before minification and bundling)
Similarly, Create.aspx makes only one browser requests and response size in only 168.2 KB and previously it was 427.2 KB.