Bundling & Minification in Web Application
Now a days, we read a lots of discussion about Bundling and Minification. By name we can guess these are two important techniques for web development.
I'd like to discussion why we need to Bundling & Minification and how we can do that?
We start with "Why we need Bundling in our application?"
Just imagine we developed an application where we used different types of resource files. Like we have 10 JS files and 5 CSS files. We reference all resources files in our HTML file.
Look at the below examples:
- <script src="//cdn.ckeditor.com/4.5.1/full/ckeditor.js"></script>
- <script src="//code.jquery.com/jquery-1.10.2.js"></script>
- <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
- <link rel="stylesheet" href="~/Content/marquee.css">
- <link rel="stylesheet" href="~/Content/csharp.css">
- <link rel="stylesheet" href="~/Content/atelier-estuary.light.css">
We deploy the web application on server, so we can access through http. I have a question for all of you, when we will hit the website address example. www.firstcrazydeveloper.com, how many request made for server? Most of developer should know the answer of above question. Each and every resources files made their own server request when we hit any website.
Most of the current major browsers limit the number of simultaneous connections per each hostname to six. Means, while six requests are being processed, additional requests for assets on a host will be queued by the browser.
Look at the image below, the IE F12 developer tools network tabs shows the timing for assets required by the About view of a sample application.
The grey bars show the time the request is queued by the browser waiting on the six connection limit. The yellow bar is the request time to first byte, that is, the time taken to send the request and receive the first response from the server. The blue bars show the time taken to receive the response data from the server. We can double-click on an asset to get detailed timing information. For example, the following image shows the timing details for loading the
The preceding image shows the Start event, which gives the time the request was queued because of the browser limit the number of simultaneous connections. In this case, the request was queued for 46 milliseconds waiting for another request to complete.
In the above discussion we get use more numbers of resource files will impact our application performances. But we can't leave that files because our application depends on these files.
What is the solution for the above problem?
In the above question we find the requirements of "Bundling & minification" in our application or can say find the answer of this question "Why we need Bundling in our application".
Minification: - Minification performs a variety of different code optimizations to Scripts or CSS, such as removing unnecessary white space and comments and shortening variable names to one character.
After using these concept in our application we can increase the performance of our application.
Look at the below image where we can verify this.
Impact of Bundling and Minification:
The following table shows several important differences between listing all the assets individually and using bundling and minification (B/M) in the sample program.
After all the above discussion and understanding these concepts, now question come into our mind, how can we implement these concepts in our application?
There are lots of way through which we can implement these concepts. Look at the following points:
1. In ASP.Net MVC4 we can use Bundleconfig.cs in App_Start folder. Where we can defined all required bundling which can use in our application.
Look at the following code:
- public class BundleConfig
- // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
- public static void RegisterBundles(BundleCollection bundles)
- bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
- bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
- // Use the development version of Modernizr to develop with and learn from. Then, when you're
- // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
- bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
- bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
- "~/Scripts/respond.js", "~/Scripts/main.js"));
- bundles.Add(new StyleBundle("~/Content/css").Include(
- "~/Content/bootstrap.css", "~/Content/Style.css", "~/Content/responsive.css",
- "~/Content/site.css", "~/Content/csharp.css", "~/Content/main.css", "~/Content/topheader.css", "~/Content/jquery-ui.css",
In the above code first we bundle the JS files the CSS file with the help of ScriptBundle & StyleBundle class.We can also use this code to use bundling in our normal ASP.Net application.
2. Web Essentials: - Web Essentials also used to bundling and minify the files in our web application. We need to install this application which support by Visual Studio. After installation this tool, we can find this in our Visual Studio menu section.
Look at the following image:
3. Grunt & Gulp: - Both use Node, and both require us to create tasks and install plugins of some sort. There are two main differences between Grunt and Gulp:
- Grunt focuses on configuration, while Gulp focuses on code.
- Grunt was built around a set of built-in, and commonly used tasks, while Gulp came around with the idea of enforcing nothing, but how community-developed micro-tasks should connect to each other.
Help of these above latest functionality we can use "Bundling & Minification" in our application and increase the performance of our application. So, the question still remains: how we can use above functionality in our application?
In coming blog we will discuss one by one these functionality with real scenario and code.