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

问题描述

当我使用标准 MVC4 模板创建我的项目时，包含了大量的 javascript，例如:jquery-obtrusive、jquery-validate、knockout、整个 jQuery UI.

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.

有多少值得保留，有多少可以扔掉?我注意到当你创建一个强类型控制器时 create.cshtml 视图生成调用:

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

这个文件到底有什么作用?我应该保留它吗?我应该引用所有这些最初在 BundleConfig.cs 中定义的 JS 文件吗?或者我可以不打扰..?

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 不是文件，而是对包的引用.

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

MVC4 中的捆绑包是捆绑在一起的脚本、样式或其他文件的集合.

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

您将在 App_Start 文件夹中有一个 BundleConfig.cs 文件，其中包含将哪个文件添加到哪个包的设置.

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

正如你在上面看到的，~/bundles/jqueryval 是包的虚拟路径，它结合了其中指定的文件.所以稍后当你看到这个时:

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.

我应该保留它吗?我应该引用所有这些 JS 文件吗?最初在 BundleConfig.cs 中定义?

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

对于 jqueryval 包，您可能会发现其中包含的不显眼的验证脚本非常有用.

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

它们是负责管理非侵入式验证的脚本，使您的 DOM 保持整洁.

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

如果您不需要或不想使用不显眼的验证，您可以从课程中删除捆绑包.如果您这样做，那么我相信您还需要更新您的 web.config，将必填字段设置为 false 以确保您的项目不会查找文件，类似这样:

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" />

这篇文章很好地解释了使用显式验证和非显式验证之间的好处和确切区别:Brad Wilson:ASP.NET MVC 3 中不显眼的客户端验证

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.

对客户端的好处是浏览器必须执行多少个单独的加载才能获取脚本/css 文件.

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

例如，如果您的视图中有 5 个文件引用，则客户端浏览器将单独下载所有 5 个文件，并且每个浏览器中可以同时下载的文件数量有限制.这意味着如果客户端的连接速度较慢，他们可能会在加载文件之前等待几秒钟.

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.

但是，如果您将所有 5 个文件配置为一个包，则浏览器只会下载 1 个文件，即捆绑的一个.

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.

当你测试这个时，注意在调试模式下没有区别，你需要在发布模式下或在BundleConfig.cs文件底部的BundleConfig.cs文件中启用优化包表>RegisterBundles 方法.

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;

您不必使用捆绑包，您仍然可以自由引用单个脚本/css 文件.但在您需要时，它确实让事情变得更容易.

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屋！