ASP.NET MVC4 jqueryjavascript 包的使用

发布于08月14日

当我用标准MVC4模板创建项目时，包含了很多javascript，例如:jquery Obstrusive、jquery validate、knockout，以及整个jquery UI.

这些东西中有多少值得保留，有多少可以扔掉？我注意到，在创建强类型控制器时，create.cshtml视图会生成调用:

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

这个文件到底是做什么的？我应该留着吗？我应该引用BundleConfig中最初定义的所有这些JS文件吗.反恐精英？或者我可以不麻烦..？

推荐答案

这个文件到底是做什么的？

jqueryval不是一个文件，而是对Bundle 包的引用.

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

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

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

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

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

上面将包括在该引用下Bundle 的脚本.

我应该留着吗？我应该引用所有这些JS文件吗

在jqueryvalBundle 包的情况下，您可能会发现包含的不引人注目的验证脚本非常有用.

它们是负责管理不引人注目的验证、保持DOM整洁的脚本.

如果您不需要或不想使用不显眼的验证，您可以在不需要或不想使用的情况下删除该Bundle 包.如果您这样做，那么我相信您还需要更新您的web.config，将必填字段设置为false，以确保您的项目不会查找文件，如下所示:

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

本文很好地解释了使用突兀验证和不突兀验证的好处和确切区别:Brad Wilson: Unobtrusive Client Validation in ASP.NET MVC 3

一般来说，我认为只包含您需要的内容是好的.如果您不需要某个包中指定的所有文件，请删除这些文件，一起排除该包，或者创建您自己的自定义包.

反复试验.如果删除它们并在浏览器调试器控制台中发现随机异常，请try 重新添加一些文件/包.

通常，Bundle 也适用于样式表:

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

开发人员的好处是只需要引用一个包，而不是几个文件.

对客户端的好处是浏览器要执行多少次单独加载才能获得脚本/CSS文件.

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

但是，如果将所有5个文件配置为在一个Bundle 包中，浏览器只下载一个文件，即Bundle 的文件.

此外，Bundle 包(或Bundle 包中的文件)已缩小，因此您不仅可以节省下载脚本所需的时间，还可以节省下载大小.

测试时，请注意，在调试模式下没有区别，您需要在发布模式下，或者在RegisterBundles方法底部的BundleConfig.cs文件中启用bundle表的优化.