ASP.NET MVC4 jquery/javascript 包的使用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11944363/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Usage of the ASP.NET MVC4 jquery/javascript bundles
提问by Baconbeastnz
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，例如：jquery-obtrusive、jquery-validate、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:
其中有多少值得保留，又有多少可以扔掉？我注意到当你创建一个强类型控制器 create.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 文件吗？或者我可以不打扰..？
回答by Nope
What exactly does this file do?
这个文件究竟有什么作用？
jqueryvalis 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.csfile in the App_Startfolder, which contains the settings of which file is added to which bundle.
您将BundleConfig.cs在App_Start文件夹中有一个文件，其中包含将哪个文件添加到哪个包的设置。
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
As you can see above ~/bundles/jqueryvalis the virtual path of the bundle which combines the files specified in it. So later on when you see this:
正如您在上面看到~/bundles/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 jqueryvalbundle 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 falseto ensure your project will not be looking for the files, similar to this:
如果您不需要或想要使用不显眼的验证，您可以从课程中删除捆绑包。如果您这样做，那么我相信您还需要更新您的web.config，将必填字段设置为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.NET 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 个文件配置为一个捆绑包，则浏览器只会下载 1 个文件，即捆绑的文件。
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.csfile at the bottom of the RegisterBundlesmethod.
当你测试这个时，注意在调试模式下没有区别，你需要在发布模式或方法BundleConfig.cs底部的文件中启用捆绑表的优化RegisterBundles。
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 文件。尽管当您需要它时，它确实使事情变得更容易。
回答by Anurag Deokar
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 库的大小，从而提高页面加载时间，提高简单字页面性能并加快页面加载速度。
System.Web.Optimization class offers the bundling and minification techniques that is exist with in the Microsoft.Web.Optimization dll.
System.Web.Optimization 类提供 Microsoft.Web.Optimization dll 中存在的捆绑和缩小技术。
What is BundleA 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.cs 文件中调用 BundleCollection 类的 Add() 方法分别为 css 和 javascripts 创建样式和脚本包。
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"));
