Click here to Skip to main content
15,867,330 members
Articles / Web Development / ASP.NET
Tip/Trick

ASP.NET MVC4: Bundling and Minification

Rate me:
Please Sign up or sign in to vote.
4.51/5 (31 votes)
23 May 2012CPOL4 min read 299.3K   36   22
ASP.NET MVC4 - Bundling and Minification

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.

Image 1

 

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

Image 2 

Before starts implementing the Bundling and Minification technique, first inspect the actual performance of the web page using firebug (Firefox developer tool).

Index.aspx:

Index.aspx 

Create.aspx:

Image 4

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. 

C++
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.

C++
<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 

Image 5

Create.aspx 

Image 6

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.  
C++
<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 

Image 7 

Create.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. 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Technical Lead Infosys
India India
Working as a Technology Lead in Infosys at Chennai, India.

Comments and Discussions

 
QuestionNeed clear picture . Pin
Member 1340701121-Sep-17 20:37
Member 1340701121-Sep-17 20:37 
QuestionDemo Code Pin
Vipin_Arora19-Jul-15 5:31
Vipin_Arora19-Jul-15 5:31 
QuestionUnable to create an instance of bundle Bundle("~/IndexBundle", typeof(JsMinify) Pin
Phani Teja Mullapudi9-Feb-15 21:33
Phani Teja Mullapudi9-Feb-15 21:33 
Questionnot working Pin
RazzSekhar4-Feb-15 18:06
RazzSekhar4-Feb-15 18:06 
SuggestionGood article Pin
CoderPanda28-Jan-14 23:48
professionalCoderPanda28-Jan-14 23:48 
GeneralMy vote of 2 Pin
Lakshmi Reddy Y6-Nov-13 20:19
Lakshmi Reddy Y6-Nov-13 20:19 
Questionmy vote of 5 Pin
vignesh chennai7-Oct-13 4:08
vignesh chennai7-Oct-13 4:08 
QuestionHow to do it dynamically? Pin
Aditya Varma.Kopparapu25-Feb-13 18:40
Aditya Varma.Kopparapu25-Feb-13 18:40 
GeneralExcellent ... Simple and to the point Pin
kiruba kumaresh R24-Feb-13 0:03
kiruba kumaresh R24-Feb-13 0:03 
GeneralMy vote of 5 Pin
dgDavidGreene18-Jan-13 18:46
dgDavidGreene18-Jan-13 18:46 
Question. Great Article Pin
Member 60397821-Nov-12 21:30
Member 60397821-Nov-12 21:30 
AnswerRe: . Great Article Pin
Lakshmi Reddy Y7-Nov-13 22:07
Lakshmi Reddy Y7-Nov-13 22:07 
GeneralMy vote of 5 Pin
tsvaja@cygnet25-Oct-12 20:07
tsvaja@cygnet25-Oct-12 20:07 
GeneralSimple and concise Pin
Member 165621415-Oct-12 4:11
Member 165621415-Oct-12 4:11 
QuestionReg. ASP.NET MVC4: Bundling and Minification Pin
After20508-Oct-12 6:08
After20508-Oct-12 6:08 
QuestionJsMinify. What is the namespace for this clas? Pin
Lijo John v5-Sep-12 0:30
Lijo John v5-Sep-12 0:30 
Questionusing .aspx & VB script in MVC4 Pin
JimmyRopes6-Aug-12 7:37
professionalJimmyRopes6-Aug-12 7:37 
GeneralMy vote of 5 Pin
PratapReddyP2-Aug-12 22:21
PratapReddyP2-Aug-12 22:21 
QuestionThe missing Msft docs - thanks! Pin
Lee Robie6-Jun-12 5:21
Lee Robie6-Jun-12 5:21 
AnswerRe: The missing Msft docs - thanks! Pin
BalaG Ganesan6-Jun-12 20:46
BalaG Ganesan6-Jun-12 20:46 
QuestionExcelent article Pin
Joogerz5-Jun-12 5:10
Joogerz5-Jun-12 5:10 
AnswerRe: Excelent article Pin
BalaG Ganesan6-Jun-12 0:09
BalaG Ganesan6-Jun-12 0:09 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.