32

当我使用标准 MVC4 模板创建我的项目时，其中包含了很多 javascript，例如：jquery-obtrusive、jquery-validate、knout、整个 jQuery UI。

其中有多少值得保留，有多少会被丢弃？当您创建强类型控制器时，我注意到 create.cshtml 视图生成的调用：

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

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

4

2 回答 2

99

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

jqueryval不是文件，它是对包的引用。

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

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

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

如您所见，~/bundles/jqueryval捆绑包的虚拟路径结合了其中指定的文件。所以稍后当你看到这个时：

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

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

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

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

它们是负责管理不显眼的验证、保持 DOM 干净整洁的脚本。

如果您不需要或不想使用不显眼的验证，您可以将捆绑软件移除。如果你这样做，那么我相信你还需要更新你的web.config，设置必填字段以false确保你的项目不会寻找文件，类似于：

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

本文很好地解释了使用侵入式验证和非侵入式验证之间的好处和确切区别：Brad Wilson：ASP.NET MVC 3 中的非侵入式客户端验证

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

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

通常，捆绑也适用于样式表：

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 个文件配置为一个捆绑包，则浏览器仅下载 1 个文件，即捆绑的一个。

此外，捆绑包（或捆绑包中的文件）被缩小，因此您不仅可以节省下载脚本所需的时间，还可以节省下载大小。

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

BundleTable.EnableOptimizations = true;

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

于 2012-08-14T00:59:53.123 回答
2

MVC4 和 .Net Framework 4.5 提供了捆绑和缩小技术，可减少对服务器的请求数量以及请求的 CSS 和 JavaScript 库的大小，从而提高了简单单词页面的加载时间，提高了页面加载速度。

System.Web.Optimization 类提供了 Microsoft.Web.Optimization dll 中存在的捆绑和缩小技术。

什么是捆绑包 捆绑包是由单个 HTTP 请求加载的一组逻辑文件。您可以通过在 BundleConfig.cs 文件中调用 BundleCollection 类 Add() 方法分别为 css 和 javascripts 创建样式和脚本包。

创建样式包

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

创建脚本包

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"));
于 2015-07-09T12:56:22.043 回答