使用ASP.NET MVC4 jquery/javascript包

Question

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

这有多少值得保留,丢掉多少钱？我注意到当你创建一个强类型的控制器时,create.cshtml视图生成了调用:

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

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

Answer 1

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

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方法底部的文件中启用bundle表的优化.

BundleTable.EnableOptimizations = true;

您不必使用捆绑包,您仍然可以自由引用单个脚本/ css文件.它确实可以让您在需要时更轻松.