Bundling and Minification in Visual Studio 2012 or Migrate Existing Website

Bundling and minification are two new techniques introduced with ASP.NET 4.5 Beta to improve request load time. It improves load time by reducing the number of requests to the server and reducing the size of requested assets (such as CSS and JavaScript).

• Bundling: It lets us combine multiple JavaScript (.js) files or multiple cascading style sheet (.css) files so that they can be downloaded as a unit, rather than making individual HTTP requests.
• Minification: It squeezes out whitespace and performs other types of compression to make the downloaded files as small as possible. At runtime, the process identifies the user agent, for example, IE, Mozilla, etc., and then removes whatever is specific to Mozilla when the request comes from IE.

To test Bundling and Minification let's create a new Web Site, possibly a blank website so that we can learn how to migrate our existing website.

Follow the steps

Step 1. Creating a Website of Opening the Existing One.

Create a new website or open the existing website that you want to migrate. You will see the following file structure.

Let's say I have the following page containing scripts and styles files.

Step 2. Testing in Developer Tools.

Now go ahead and run this in IE, when running in IE press F12 to open developer tools. In developer tools, click on the "Network" tab and then click on "Start capturing" and then refresh the web page. You will notice the following HTTP requests, data sent, data received, and time taken in "developer tools".

In the above image, you can see there were 5 HTTP requests, the data sent, the data received and the time taken to complete it. You will also see the system-made individual HTTP requests for each script and style file.

Step 3. Installing the NuGet Package "ASP.NET Optimization-Bundling"

Now, let's take advantage of Bundling and Minification to eliminate the individual HTTP requests of script files and style files.

For this, we need to open "Manage NuGet Packages" and search for the "Microsoft.Web.Optimization" library.

Now, click to install "ASP.NET Optimization-Bundling".

After installation, you will notice the following library file in the Bin folder.

Step 4. Configuring Package in the New Website or Existing Website.

Now, open the website that you want to migrate and make two changes.

Modify the Script/Style References (maybe in the Default.aspx or Master Page).

Adding Library References/Creating Bundle in Global.asax.

Step 5. Testing again in Developer Tools.

Now go ahead and run this in IE, when running in IE press F12 to open developer tools. In developer tools, click the "Network" tab and then click on "Start capturing" and then refresh the web page. You will see the following HTTP requests, data sent, data received, and time taken in "developer tools".

Now, only 3 HTTP requests were made and the data sent, data received and time taken have all improved dramatically.

I hope you like it. Thanks.