Introduction
This article introduce what is Bundling and Manification in MVC and demonstrates how to implement Bundling and Manification with examples.
Getting Started
Bundling and Minification are two techniques available in ASP.NET 4.5. Bundling and Minification helps us improve request load times of a page. Bundling and minification improves load time by reducing the number of requests to the server and reducing the size of requested assets such as CSS and JavaScript. thus increasing performance.
Bundling
Web based projects always need CSS and script files. Bundling helps us combine multiple JavaScript and CSS files in to a single entity thus minimizing multiple requests in to a single request.If we can somehow combine all the JS files into a single bundle and request them as a single unit that would result in increased performance.
Implementation
To implement bundling in MVC you need to add the JS files you want bundle into a single entity in to the bundles collection using BundleConfig.cs which is available in App_Start folder.Example:-
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery-ui.min.js",
"~/Scripts/jquery.unobtrusive-ajax.js"));
above code implements bundling by combine three javascript files into bundle called jquery.
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
above bundls three css files, name of bundle is css.Minification
Minification reduces the size of script and CSS files by removing blank spaces , comments etc. For example below is a simple javascript code with comments.Fore example lets say there is a javascript file that contains below code with one comment
// This is test
var a = 0;
a =a + 5;
a= a * 10;
a= a - 10;
After implementing minification the above JavaScript code will be change into one or multiple line with whitespaces and comments. Like below code. var a = 0;a =a + 5;a= a * 10;a= a - 10;
implementation of bundling and minification is same, minification is implemented by itself when you implement bundling.Summary
In the above of this article, we have discussed what is bundling how to implement and about minification. Hope this article may helpful to you.
Thanks