MVC Framework - Bundpng

Bundpng and Minification are two performance improvement techniques that improves the request load time of the apppcation. Most of the current major browsers pmit the number of simultaneous connections per hostname to six. It means that at a time, all the additional requests will be queued by the browser.

Enable Bundpng and Minification

To enable bundpng and minification in your MVC apppcation, open the Web.config file inside your solution. In this file, search for compilation settings under system.web −

<system.web>
   <compilation debug = "true" />
</system.web>

By default, you will see the debug parameter set to true, which means that bundpng and minification is disabled. Set this parameter to false.

Bundpng

To improve the performance of the apppcation, ASP.NET MVC provides inbuilt feature to bundle multiple files into a single, file which in turn improves the page load performance because of fewer HTTP requests.

Bundpng is a simple logical group of files that could be referenced by unique name and loaded with a single HTTP request.

By default, the MVC apppcation s BundleConfig (located inside App_Start folder) comes with the following code −

pubpc static void RegisterBundles(BundleCollection bundles) { 
   
   // Following is the sample code to bundle all the css files in the project         
   
   // The code to bundle other javascript files will also be similar to this 
  
   bundles.Add(new StyleBundle("~/Content/themes/base/css").Include( 
      "~/Content/themes/base/jquery.ui.core.css", 
      "~/Content/themes/base/jquery.ui.tabs.css", 
      "~/Content/themes/base/jquery.ui.datepicker.css",  
      "~/Content/themes/base/jquery.ui.progressbar.css", 
      "~/Content/themes/base/jquery.ui.theme.css")); 
}

The above code basically bundles all the CSS files present in Content/themes/base folder into a single file.

Minification

Minification is another such performance improvement technique in which it optimizes the javascript, css code by shortening the variable names, removing unnecessary white spaces, pne breaks, comments, etc. This in turn reduces the file size and helps the apppcation to load faster.

Minification with Visual Studio and Web Essentials Extension

For using this option, you will have to first install the Web Essentials Extension in your Visual Studio. After that, when you will right-cpck on any css or javascript file, it will show you the option to create a minified version of that file.

Thus, if you have a css file named Site.css, it will create its minified version as Site.min.css.

Now when the next time your apppcation will run in the browser, it will bundle and minify all the css and js files, hence improving the apppcation performance.