Introduction
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.
Background
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).
Index.aspx:
Create.aspx:
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.
BundleTable.Bundles.EnableDefaultBundles();
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.
<script src="<%: Url.Content("~/Scripts/Demo JS Files/JS") %>" type="text/javascript"></script>
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.
Index.aspx
Create.aspx
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
Bundle class from Microsoft.Web.Optimization is used to create Custom Bundles. To create custom bundle we need to create object of Bundle class by specifying virtual path through which we can reference custom bundle and transform type whether it is JavaScript or CSS.
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");
BundleTable.Bundles.Add(indexBundle);
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");
BundleTable.Bundles.Add(createBundle);And the below code is used to refer in respective view.
<script src="<%: Url.Content("~/CreateBundle") %>" type="text/javascript"></script>
Here we go, now run the website and inspect the webpage (Index.aspx and Create.aspx) performance once again.
Index.aspx
Create.aspx
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.
Tips
In ASP.NET MVC 4 Project, the _Layout.cshtml file will include Razor Code referencing System.Web.Optimization and BundleTable.Bundles in the CSS and JavaScript References in the head of the file. So instead of adding plain virtual path in script/link tag, use System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl() method to add the virtual paths, It will cache the bundled & minified files in client browser for a longer time.
