Thursday, September 13, 2012

Bundling and Minification

Basics of Bundling and Minification
As more and more people use mobile devices to surf the web, it is becoming increasingly important that the websites and apps we build perform well with them. We’ve all tried loading sites on our smartphones – only to eventually give up in frustration as it loads slowly over a slow cellular network.  If your site/app loads slowly like that, you are likely losing potential customers because of bad performance.  Even with powerful desktop machines, the load time of your site and perceived performance can make an enormous customer perception.
Most websites today are made up of multiple JavaScript and CSS files to separate the concerns and keep the code base tight. While this is a good practice from a coding point of view, it often has some unfortunate consequences for the overall performance of the website.  Multiple JavaScript and CSS files require multiple HTTP requests from a browser – which in turn can slow down the performance load time. 

I have placed following line of code in design
    <script src="scripts/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="scripts/all.js" type="text/javascript"></script>
    <script src="scripts/references.js" type="text/javascript"></script>
    <script src="scripts/jquery-1.6.2-vsdoc.js" type="text/javascript"></script>
    <script src="scripts/jquery-1.6.2.js" type="text/javascript"></script>
    <script src="scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
    <script src="scripts/modernizr-2.0.6-development-only.js" type="text/javascript">

Below I’ve opened a local website in IE9 and recorded the network traffic using IE’s built-in F12 developer tools.  Each file is currently requested separately by the browser and returned by the server, and the process can take a significant amount of time proportional to the number of files in question.

ASP.NET is adding a feature that makes it easy to “bundle” or “combine” multiple CSS and JavaScript files into fewer HTTP requests. This causes the browser to request a lot fewer files and in turn reduces the time it takes to fetch them
The next release of ASP.NET is also adding a new feature that makes it easy to reduce or “minify” the download size of the content as well.  This is a process that removes whitespace, comments and other unneeded characters from both CSS and JavaScript. The result is smaller files, which will download and load in a browser faster.
Simply replace the lines of code with
  <script src="scripts/js" type="text/javascript"></script>
Remember js – indicates the extension of files that needs to be bundled and minified
Look at the result

Any number of directories/sub-directories supported
In the example above we just had a single “Scripts” and “Styles” folder for our application.  This works for some application types (e.g. single page applications).  Often, though, you’ll want to have multiple CSS/JS bundles within your application – for example: a “common” bundle that has core JS and CSS files that all pages use, and then page specific or section specific files that are not used globally.
You can use the bundling/minification support across any number of directories or sub-directories in your project – this makes it easy to structure your code so as to maximize the bunding/minification benefits.  Each directory by default can be accessed as a separate URL addressable bundle. 
There is BundleConfig.cs defined under /App_Start folder. We can define our custom scripts/style there .
Simply add

   bundles.Add(new ScriptBundle("~/bundles/WebFormsJs").Include(


bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(

After this reference the same in design page like
<script src="/bundles/WebFormsJs"></script>


No comments:

Post a Comment