Why need of bundling?
When we
want to use any javascript and or CSS we include it in page one after other
like follows -
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/someJavascript1.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/someJavascript2.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/someJavascript3.js")" type="text/javascript"></script>
…..
When we
access the page browser needs to load this page to load this page browser needs
to load all of the above links for CSS and JavaScript's. To load these files
browser creates HTTP request for each one of them. Page is not fully loaded
until each of these are loaded and as number of references increases page load
time increases and performances decreases.
Problem here is number of HTTP request by browser increases, if we
reduces number of HTTP requests we can increase the performance.
Bundling in ASP.NET MVC 4?
ASP.NET MVC has namespace system.web.optimization
which provides this bundling feature. Bundle is logical group of files that can
be referenced by name and can be loaded by a single HTTP request. In case of
ASp.NET MVC 4 project you will see following line in page _Layout.cshtml
@Scripts.Render("~/bundles/jquery")
Here ~/bundles/jquery is the bundle name, When browser
render this page it only sends one HTTP request but loads all file. So number
of HTTP request is reduced and hence load time is also reduced.
Where do we Register bundle name?
From above
we have seen that bundling can help improving performance; Let us see how to
register the bundles in ASP.NEt MVC 4. If you look at the global.asax.cs then you will find function Application_Start
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
WebApiConfig.Register(GlobalConfiguration.Configuration);
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);
AuthConfig.RegisterAuth();
}
Highlighted
line is the call to method
RegisterBundles in class BundleConfig this method define / register all
bundles, You will find this class under folder App_Start.
Let us see
the code inside this class.
public class
BundleConfig
{
// For more
information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new
ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
// 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(
"~/Scripts/modernizr-*"));
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.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"));
}
}
In above
code highlighted part create a new JavaScript bundle with name ~/bundles/jquery that
contains all scripts files from the folder Scripts that
matches pattern jquery-{version}.js
Creating your own bundle
You can simply create your own bundle by
creating object of class Bundle and adding your files to it. Once that is done
you need to add your class to bundleCollection.
References
