Let’s have a feel of it, create a sample web application in VS 11 targeting to ASP.NET 4.5 as shown below:
Then, add multiple CSS files to your solution as shown below:
Let’s say, you are referencing all JS & CSS files in your master file for using in content pages as shown below:
We will run fiddler 2 [network monitoring tool]/ IE Developer Tools to see the traffic after running the web application.
Now, we will add Bundling to our application by replacing the below code:
Add below entry in Global.asax [include System.Web.Optimization] on Application_start event to enable default bundling [it means bundle files under Scripts & Styles folder]:
Run the application and Fiddler, we can see number of requests reduced:
JS & CSS files will be sorted alphabetically and merged into individual files with minification.
We can write custom bundling by defining the list of JS & CSS files to be bundled in Global.asax on Application_start as shown below:
void Application_Start(object sender, EventArgs e)
// Code that runs on application startup
Bundle b = new Bundle("~/CustomStyles1", typeof(CssMinify));
Add below entry to master file to load that bundle:
<link href="CustomStyles1" rel="stylesheet" type="text/css" />
By using Bundling and Minification, we can reduce size and number of requests to load our JS & CSS files of the website.
Note:This blog is based on features of preview only, and is subject to change in later releases.