From which version ?
We can use Bundling and minification from ASP.NET 4.5 (ASP.NET MVC 4). In MVC3 and Asp.Net 4.0 application we can utilize by including System.Web.Optimization.dll and WebGrease.dll reference to our projects and we can create the bundle for .css and .js files with in the Global.asax file.
What is it?
Bundling: It’s a group of js and css files that could be referred by unique name.
Purpose: The main usage of bundling is, it being loaded with one HTTP request instead of multiple request for each file.
Minification : It’s main process is removing of unnecessary white-space from the js and css files.
Purpose: The main purpose is to remove line break and comments from code and improving load times by reducing its size of the file.
Work with Example:
Let we start to discuss with the simple example of working process for bundling with js files.
Example 1: Without Bundling
Step :1
In our example, i had referred five following script files in the “index.cshtml” view.
|
1 2 3 4 5 |
<script src="~/Scripts/jquery-1.8.2.js"></script> <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script> <script src="~/Scripts/jquery.validate.js"></script> <script src="~/Scripts/knockout-2.2.0.debug.js"></script> <script src="~/Scripts/knockout-2.2.0.js"></script> |
Run the application and see the output for the request in browser as shown below. Each files request make their own time. Totally they spend 513 millisecond to load all files(ie., 0.513 seconds).
From the above image, we understood the page request five time for loading script file . To reduce this loading time we have moving to bundling concept. Let we dicuss with sample exmple
Example 2: Using Bundling
Step :1
Instead of refering all the files in view, we moving them together in BundleConfig.cs file in App_Start folder like below
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/bundles/dotnet-helpers-scripts").Include( "~/Scripts/jquery-1.8.2.js", "~/Scripts/jquery.unobtrusive-ajax.js", "~/Scripts/jquery.validate.js", "~/Scripts/knockout-2.2.0.debug.js", "~/Scripts/knockout-2.2.0")); //For adding css use below piece of code. Add css files after removing all white-space and line break to achieve minification bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css")) } } |
Step :2
Be aware these two things has been included in Application_Start method in Global.asax file in the application
|
1 2 3 4 5 6 |
protected void Application_Start() { BundleTable.EnableOptimizations = true; BundleConfig.RegisterBundles(BundleTable.Bundles); .... } |
Here we calling the bundle dotnet-helpers-scripts which contain all 5 files. So here the request will only once while site loading
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> @Scripts.Render("~/bundles/dotnet-helpers-scripts") </head> <body> <div> <h1>Bundling in dotnet-helpers.com</h1> </div> </body> </html> |
Run the application to see the output difference using browser debugger mode
Form above image, all files are bundled in one (ie., dotnet-helpers-scripts). Instead of loading five .js files, it has been loaded with single dotnet-helpers-scripts bundle. so its taking only 63 millisecond (0.063 second) to load.
Minification :
In same way we can also include the .css files in bundling. We need to remove all the white-space and commands as shown in below example
Example:
body{background-color: #fff;border-top: solid 10px #000;color:#333;font-size:.85em;font-family:”Segoe UI”, Verdana,Helvetica,Sans-Serif;margin:0;padding:0;}…..
For css we use @Styles.Render(“….”) instead of @Script.Render(“….”) and bundles.Add(new StyleBundle(“~/Content/css”).Include(“~/Content/site.css”)) instead of bundles.Add(new ScriptBundle(“~/bundles/jquery”).Include(“~/Scripts/…”));
Keep cool coding….
Leave A Comment