Please enable Javascript to correctly display the contents on Dot Net Tricks!

Bundling and minification in MVC3 and Asp.Net 4.0

  Author : Shailendra Chauhan
Posted On : 05 Jan 2013
Total Views : 144,828   
Updated On : 26 Sep 2016
 

You can also implement bundling and minification techniques with in Asp.net MVC3 and Asp.net 4.0. In previous article Asp.net MVC 4 performance optimization with bundling and minification, I have explained both the techniques, Now I would like to share you could you achieve this functionality with .Net Framework 4.0.

How to do it in MVC3 and Asp.Net 4.0

Adding Refrences

First of all add the references of System.Web.Optimization.dll and WebGrease.dll to your MVC3 and Asp.Net 4.0 projects as shown below. You can download the dll by using download link.

Creating Bundle

Now create the bundle for your css and js files with in the Global.asax file as shown below.

public static void RegisterBundles(BundleCollection bundles)
{
 //Creating bundle for your css files
 bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/mystyle.min.css", 
 "~/Content/site.min.css"));
 //Creating bundle for your js files
 bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
 "~/Scripts/jquery-1.5.1.min.js",
 "~/Scripts/jquery.validate.min.js",
 "~/Scripts/jquery.validate.unobtrusive.min.js"));
}

Here, I have created the bundle of all required css and js files. You can also add your own css and js files with complete path using Include method.

Registering Bundle

You need to register above created bundles with in Application_Start event of Global.asax like as

protected void Application_Start()
{
 RegisterBundles(BundleTable.Bundles);
 // Other Code is removed for clarity
}

Adding Bundles to Layout Page in MVC3

Now you can add the above created style and script bundles to the Layout page or where you want to use as shown below:

@System.Web.Optimization.Styles.Render("~/Content/css")
@System.Web.Optimization.Scripts.Render("~/bundles/jquery")

Adding Bundles to Master Page in Asp.Net 4.0

Now you can add the above created style and script bundles to the Master page or where you want to use as shown below:

<%: Styles.Render("~/Content/css") %>
<%: Scripts.Render("~/bundles/jquery")%>

In Asp.Net 4.0 you also required to add System.Web.Optimization namespace and assembly Microsoft.AspNet.Web.Optimization.WebForms reference to the web.config file of your Asp.Net 4.0 project as shown below:

<system.web>
 <compilation debug="true" targetFramework="4.0" />
 <pages>
 <namespaces>
 <add namespace="System.Web.Optimization" />
 </namespaces>
 <controls>
 <add assembly="Microsoft.AspNet.Web.Optimization.WebForms" namespace="Microsoft.AspNet.Web.Optimization.WebForms" tagPrefix="webopt" />
 </controls>
 </pages>
<!-- Other Code is removed for clarity -->
</sytem.web >

You need not to do any changes in web.config file of your MVC3 project.

Enabling Bundling and Minification in debug mode

Bundling and minification doesn't work in debug mode. So to enable this features you need to add below line of code with in Application_Start event of Global.asax.

protected void Application_Start()
{
 BundleConfig.RegisterBundles(BundleTable.Bundles);
 //Enabling Bundling and Minification
 BundleTable.EnableOptimizations = true; 
 // Other Code is removed for clarity
}

How it works..

Now run your application and you will see that all the css and js files are converted to single css and js file as shown below:

Minification

Minification is technique for removing unnecessary characters (like white space, newline, tab) and comments from the JavaScript and CSS files to reduce the size which cause improved load times of a webpage. There are so many tools for minifying the js and css files. JSMin and YUI Compressor are two most popular tools for minifying the js and css files. Use these tools for minifiying your css and js files and use in your application with ".min" suffix. So that you can easily identified that this is a minimize version of your css or js file.

What do you think?

I hope you will enjoy the tips while performance optimization of your MVC3 or Asp.Net 4.0 application. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.



Free Interview Books
 
COMMENTS (1)
Kannan Reply

Hi, I have followed the same steps for bundling the js files, I could bundle the files, but unfortunately when I run the application it is giving syntax error in the js files, any suggestion pls

23 MAY
Xamarin Forms : Build Cross-platform Apps (Online)

09:00 PM-11:00 PM IST(+5.30 GMT)

Know More
5 MAY
ASP.NET MVC with Angular4 Development (Online)

06:30 AM-08:30 AM IST(+5.30 GMT)

Know More
29 APR
Xamarin Forms : Build Cross-platform Apps (Classroom)

5:00 PM-6:30 PM

Know More
29 APR
ASP.NET MVC with Angular2 Development (Classroom)

9:30 AM-11:00 AM

Know More
27 APR
ASP.NET Core Development (Online)

07:00 AM - 09:00 AM IST( TUS, THR)

Know More
22 APR
NodeJS Development (Classroom)

11:00 AM-12:30 PM

10 APR
Master Class ASP.NET MVC 5 with Angular2 Plus Angular4 Development (Online)

09:00 PM - 11:00 PM IST (M/W/F)

8 APR
MEAN Stack 2 Development (Classroom)

11:00 AM-12:30 PM

25 MAR
Xamarin Forms : Build Cross-platform Apps (Classroom)

8:00 AM-9:30AM

21 MAR
ASP.NET MVC with Angular2 Development (Online)

09:00 PM - 11:00 PM IST( TUS, THR, SAT)

25 FEB
ASP.NET MVC with Angular2 Development (Classroom)

03:30 PM-05:30 PM

24 FEB
Angular 2 with Type Script (Online)

09:00 PM-11:00 PM IST(Mon,Wed,Fri)

BROWSE BY CATEGORY
 
 
LIKE US ON FACEBOOK
 
+