在ASP.NET MVC4的jQuery / JavaScript的包的使用 [英] Usage of the ASP.NET MVC4 jquery/javascript bundles

问题描述

当我创建我的项目与标准模板MVC4，还有的javascript ALOT在内，例如：jQuery的侵扰，jQuery的-验证，淘汰赛，整个jQuery UI的

这里面有多少是值得保留，又有多少是扔掉？当你创建一个强类型的控制器的create.cshtml视图生成调用我注意到：

  @section脚本{
    @ Scripts.Render（〜/包/ jqueryval）
}
 

这到底是什么这个文件呢？我应该保持下去吗？我要引用所有最初在BundleConfig.cs定义这些JS文件？或者，我可以不打扰..？

解决方案

  

这到底是什么这个文件呢？

jqueryval 不是一个文件，它是一个捆绑的引用。

在MVC4包是捆绑在一起成为一个单一的捆绑的脚本，样式或其他文件的集合。

您将在 App_Start 文件夹 BundleConfig.cs 文件，该文件包含的文件中的设置加入到包。

  bundles.Add（新ScriptBundle（〜/包/ jqueryval）。包括（
            〜/脚本/ jquery.unobtrusive *，
            〜/脚本/ jquery.validate *））;
 

正如你可以在上面看到〜/包/ jqueryval 是结合在它指定的文件捆绑的虚拟路径。所以后来当你看到这上：

  @section脚本{
    @ Scripts.Render（〜/包/ jqueryval）
}
 

以上将包括参考下捆绑的脚本。

  

我应该保持下去吗？我应引用所有这些都是JS文件
  在BundleConfig.cs最初定义？

在的情况下， jqueryval 捆绑，你可能会发现，包括不显眼和验证脚本是非常有用的。

他们将照顾管理不显眼的验证，使您的DOM非常干净的脚本。

您可以删除掉捆绑当然，如果你不需要或不想要使用不引人注目的验证。如果你这样做，那么我相信你也将需要更新您的的web.config ，设置必要的字段来假为确保您的项目将不会被查找的文件，类似于这样：

 ＆LT;添加键=ClientValidationEnabledVALUE =FALSE/＆GT;
＆LT;添加键=UnobtrusiveJavaScriptEnabledVALUE =FALSE/＆GT;
 

这样做的好处，用突兀和不显眼的审定之间准确的区别在这篇文章中很好的解释：的 布拉德·威尔逊：在ASP.NET MVC 3不显眼的客户端验证

在一般情况下，我会以为这是好事，只包括你所需要的。如果你不需要捆绑指定的所有文件，删除这些文件，排除捆绑在一起，或者创建自己的自定义捆绑。

试验和错误。如果删除它们，并找到你的浏览器调试器控制台随机异常，尝试添加一些文件/捆回。

---

在一般情况下，还捆绑有样式表如下：

  bundles.Add（新StyleBundle（〜/内容/主题/基/ CSS）。包括（
            〜/内容/主题/基/ jquery.ui.core.css
            〜/内容/主题/基/ jquery.ui.resizable.css
            〜/内容/主题/基/ jquery.ui.selectable.css
            〜/内容/主题/基/ jquery.ui.accordion.css
            〜/内容/主题/基/ jquery.ui.autocomplete.css
            〜/内容/主题/基/ jquery.ui.button.css
            〜/内容/主题/基/ jquery.ui.dialog.css
            〜/内容/主题/基/ jquery.ui.slider.css
            〜/内容/主题/基/ jquery.ui.tabs.css
            〜/内容/主题/基/ jquery.ui.datepicker.css
            〜/内容/主题/基/ jquery.ui.progressbar.css
            〜/内容/主题/基/ jquery.ui.theme.css））;
 

给开发者的好处是只具有参考个别包，而不是多个文件。

给客户的好处是，有多少个人的负载，浏览器必须做的就是脚本/ css文件。

如果您例如在视图5文件的引用客户端浏览器将另行下载所有5并且在每个浏览器的限制多少文件可以同时下载。这意味着，如果一个客户有一个较慢的连接加载的文件之前，他们可以等待几秒钟。

不过，如果你把所有的5个文件配置为在一个单一的包，浏览器只下载1个文件，捆绑之一。

此外，束缩小的（或在包中的文件），所以你不仅节省了花费的时间来下载脚本，但你也节省下载大小。

在测试这一点，注意在调试模式是没有区别的，你需要在释放模式或启用的 BundleConfig.cs 文件捆绑表的优化在 RegisterBundles 方法的底部。

  BundleTable.EnableOptimizations = TRUE;
 

您不必使用包，你仍然可以自由引用单个脚本/ css文件。它使事情变得更容易，虽然当你需要它。

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..?

解决方案

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.

这篇关于在ASP.NET MVC4的jQuery / JavaScript的包的使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！