Follow by Email

Friday, December 5, 2014

Implementing bundling in mvc application || optimization of mvc application

hi here we will see how to implement bundling in mvc 4.
Bundling helps us to reduce the number of http requests made for calling .css and .js files. Bundling is a process where we bind multiple js or css files into one , so that we can reduce the number of http requests made for calling this files and thus improving the performance of a web application.

1. create a new mvc project, and go to manage nuget packages options and install web optimization framework.

2. now go to solution explorer app_start folder and create a new class called BundleConfig.cs

3. in bundleConfig.cs create seperate bundles for js and css files.
public class BundleConfig
public static void RegisterBundles(BundleCollection bundles)
bundles.Add(new Bundle(“~/bundles/mycss”).Include(“~/css/StyleSheet1.css”,”~/css/StyleSheet2.css”));
bundles.Add(new ScriptBundle(“~/bundles/jsbundle”)
//another way
//var bootstrapCss = new Bundle(“~/bootstrap/css”, new CssMinify());
//var bootstrapJs = new Bundle(“~/bootstrap/js”, new JsMinify());
4. Now go to global.asax.cs file and add
BundleTable.EnableOptimizations = true;

5. a) make sure debug is set to false in the web.config file of the application
b) and under <system.web> <pages><namespaces> tag add
  <add namespace=”System.Web.Optimization”/>
6. now we will go to view page(.cshtml) and add the js and css bundle references
@using System.Web.Optimization;
<!DOCTYPE html>
<meta name=”viewport” content=”width=device-width” />
<h1>Hi welcome to my site</h1>
<p>Enter your Name:</p>
<input id=”txtName” type=”text”/>
<button onclick=”message();”>Enter</button>

now lets run the application to check
1. Before Bundling
2. After Bundling ( Check the time )