jquery - ASP.NET MVC4 jquery/javascript 包的使用

Question

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

其中有多少值得保留，有多少被丢弃？我注意到，当您创建强类型 Controller 时，create.cshtml View 会生成调用:

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

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

Answer 1

What exactly does this file do?

jqueryval不是文件，而是对 bundle 的引用。

MVC4 中的 bundle 是捆绑在一起形成单个 bundle 的脚本、样式或其他文件的集合。

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

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

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

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

以上内容将包括该引用下捆绑的脚本。

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

以jqueryval为例 bundle 中，您可能会发现其中包含的不显眼的验证脚本非常有用。

它们是负责管理不显眼的验证的脚本，使您的 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

一般来说，我认为最好只包含您需要的内容。如果您不需要 bundle 中指定的所有文件，请删除这些文件、一起排除该 bundle 或创建您自己的自定义 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 文件。

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

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

此外， bundle (或 bundle 中的文件)被缩小，因此您不仅节省了下载脚本所需的时间，而且还节省了下载大小。

当您对此进行测试时，请注意在 Debug模式下没有区别，您需要处于 Release模式或在BundleConfig.cs中启用捆绑表的优化文件位于RegisterBundles底部方法。

BundleTable.EnableOptimizations = true;

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