Usage of the ASP.NET MVC4 jquery/javascript bundles

Question

when I created my project with the standard MVC4 template, there was ALOT of javascript included, e.g: jquery-obtrusive, jquery-validate, knockout, the entire jQuery UI.

How much of this is worth keeping and how much is throw away? I've noticed when you create a strongly typed Controller the create.cshtml view generated calls:

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

What exactly does this file do? Should I keep it? Should I reference all of these JS files that were initially defined in BundleConfig.cs? Or can I not bother..?

Answer 1

What exactly does this file do?

jqueryval is not a file it is a reference to a bundle.

A bundle in MVC4 is a collection of scripts, styles or other files bundled together into a single bundle.

You will have a BundleConfig.cs file in the App_Start folder, which contains the settings of which file is added to which bundle.

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
            "~/Scripts/jquery.unobtrusive*",
            "~/Scripts/jquery.validate*"));

As you can see above ~/bundles/jqueryval is the virtual path of the bundle which combines the files specified in it. So later on when you see this:

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

The above will include the scripts bundled under that reference.

Should I keep it? Should I reference all of these JS files that were initially defined in BundleConfig.cs?

In the case of the jqueryval bundle you might find that the unobtrusive and validation scripts included are very useful.

They are the scripts which will take care of managing unobtrusive validation, keeping your DOM nice and clean.

You can remove the bundle off course if you don't need or want to use unobtrusive validation. If you do that then I believe you will also need to update your web.config, setting the required fields to false to ensure your project will not be looking for the files, similar to this:

<add key="ClientValidationEnabled" value="false" />
<add key="UnobtrusiveJavaScriptEnabled" value="false" />

The benefit and exact difference between using obtrusive and unobtrusive validation is explained very well in this article: Brad Wilson: Unobtrusive Client Validation in ASP.NET MVC 3

In general, I would assume it is good to only include what you need. If you don't need all the files specified in a bundle, remove those files, exclude the bundle all together or create your own custom bundles.

Trial and error. If you remove them and find random exceptions in your browser debugger console, try adding some of the files/bundles back in.

---

In general, bundling also works with style-sheets:

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"));

The benefit to the developer is only having to reference an individual bundle instead of several files.

The benefit to the client is how many individual loads the browser has to do to get the scripts/css files.

If you for example have 5 files references in your view the client browser will download all 5 separately and there is a limit in each browser how many files can be downloaded simultaneously. This means that if a client has a slower connection they could wait a few seconds before the files are loaded.

However, if you have all 5 files configured to be in a single bundle, the browser only downloads 1 file, the bundled one.

In addition the bundles are minified (or the files in the bundles) so you are not only saving on time it takes to download the scripts but you also save on download size.

When you test this, note in debug mode is no difference, you need to be in release mode or enable optimization of the bundle table in the BundleConfig.cs file at the bottom of the RegisterBundles method.

BundleTable.EnableOptimizations = true;

You don't have to use the bundles, you still can freely reference individual scripts/css files. It does makes things easier though when you need it.

Answer 2

MVC4 and .Net Framework 4.5 offer bundling and minification techniques that reduce the number of request to the server and size of requested CSS and JavaScript library, which improve page loading time in Simple word page performance is increases and page is loaded faster.

System.Web.Optimization class offers the bundling and minification techniques that is exist with in the Microsoft.Web.Optimization dll.

What is Bundle A bundle is a logical group of files that is loaded with a single HTTP request. You can create style and script bundle for css and javascripts respectively by calling BundleCollection class Add() method with in BundleConfig.cs file.

Creating Style Bundle

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.min.css",
"~/Content/mystyle.min.css"));

Creating Script bundle

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
 "~/Scripts/jquery-1.7.1.min.js",
 "~/Scripts/jquery.validate.min.js",
 "~/Scripts/jquery.validate.unobtrusive.min.js"));