使用ASP。净MVC4 jquery javascript /包

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.

当我使用标准的MVC4模板创建项目时，包含了大量的javascript。g: jqueryobtrusive, jqueryvalidate, knockout，整个jQuery UI。

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:

其中有多少是值得保留的，有多少是扔掉的?我注意到当你创建一个强类型控制器的时候。cshtml视图生成的调用:

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

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..?

这个文件到底是做什么的?我应该把它吗?我应该引用BundleConfig.cs中最初定义的所有这些JS文件吗?或者我可以不麻烦…?

2 个解决方案

#1

What exactly does this file do?

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

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

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

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

MVC4中的包是将脚本、样式或其他文件打包成一个包的集合。

You will have a BundleConfig.cs file in the App_Start folder, which contains the settings of which file is added to which bundle.

你会得到一个BundleConfig。在App_Start文件夹中的cs文件，该文件夹包含将文件添加到哪个包的设置。

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

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:

正如您在上面看到的~/bundle /jqueryval是绑定包中指定文件的虚拟路径。之后当你看到这个

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

The above will include the scripts bundled under that reference.

上面将包括在该引用下绑定的脚本。

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

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

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

对于jqueryval包，您可能会发现包含的不引人注目的和验证脚本非常有用。

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

这些脚本将负责管理不引人注目的验证，保持DOM的整洁。

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:

如果您不需要或不想使用不引人注目的验证，您可以将该包删除。如果你这样做，我相信你也需要更新你的网络。配置，将所需字段设置为false，以确保项目不会查找文件，类似如下:

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

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

在本文中，我们很好地解释了使用突发性和非突发性验证之间的好处和确切区别:Brad Wilson: ASP中的不突发性客户端验证。净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.

开发人员的好处是只需引用一个单独的包，而不必引用几个文件。

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

客户机的好处是，浏览器要获得脚本/css文件需要执行多少次单独的加载。

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个文件引用，客户端浏览器将分别下载所有5个文件，每个浏览器都有一个限制，即可以同时下载多少文件。这意味着，如果客户机的连接速度较慢，它们可以在加载文件之前等待几秒钟。

However, if you have all 5 files configured to be in a single bundle, the browser only downloads 1 file, the bundled one.

但是，如果您将所有5个文件配置为一个包，浏览器只下载一个文件，绑定一个文件。

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.

此外，捆绑包是缩小的(或者捆绑包中的文件)，所以您不仅节省了下载脚本所需的时间，而且还节省了下载大小。

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.

当您测试它时，注意在调试模式中没有区别，您需要在释放模式中，或者在BundleConfig中启用bundle表的优化。registerbundle方法底部的cs文件。

BundleTable.EnableOptimizations = true;

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.

您不必使用这些包，您仍然可以*地引用单个脚本/css文件。当你需要的时候，它会让事情变得更简单。

#2

MVC4 and .Net Framework 4.5 offer bundling and minification techniques that reduce the number of request to the server and size of requested CSS and JavaScript library, which improve page loading time in Simple word page performance is increases and page is loaded faster.

MVC4和。net Framework 4.5提供了捆绑和缩小技术，减少了对服务器的请求数量和请求的CSS和JavaScript库的大小，提高了简单的word页面加载时间，提高了页面性能，页面加载速度更快。

System.Web.Optimization class offers the bundling and minification techniques that is exist with in the Microsoft.Web.Optimization dll.

包含。优化类提供了Microsoft.Web中存在的捆绑和缩小技术。优化dll。

What is Bundle A bundle is a logical group of files that is loaded with a single HTTP request. You can create style and script bundle for css and javascripts respectively by calling BundleCollection class Add() method with in BundleConfig.cs file.

捆绑包是一组逻辑文件，其中包含一个HTTP请求。通过在BundleConfig中调用BundleCollection类Add()方法，您可以分别为css和javascript创建样式和脚本包。cs文件。

Creating Style Bundle

创造风格的包

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

Creating Script bundle

创建脚本包

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

#1