将项目的所有Scripts和css捆绑在一起答案

【问题标题】：Bundling all the Scripts and css of the project together将项目的所有Scripts和css捆绑在一起
【发布时间】：2017-08-19 22:36:23
【问题描述】：

我在 MVC 项目中编写了许多脚本和 css。

我正在使用捆绑和缩小，我知道我可以像这样将它们捆绑在一起：

bundles.Add(new StyleBundle("~/Content/site/").Include("~/Content/site/*.css"));
bundles.Add(new ScriptBundle("~/bundles/site").Include("~/Scripts/site/*.js"));

问题是我不想Render所有的脚本和css在一起，我每个View都需要一两个，我知道我可以手动注册每个脚本/css然后就可以了render它们分别在每个视图中：

bundles.Add(new ScriptBundle("~/bundles/script1").Include("~/Scripts/site/script1.js"));
bundles.Add(new ScriptBundle("~/bundles/script2").Include("~/Scripts/site/script2.js"));

然后在一个视图中：

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

在第二个中：

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

我的问题是这是正确的还是有更好的解决方案。

【问题讨论】：

捆绑器的特点是，它捆绑了你所有的脚本。下载多个小文件的开销比较大。关键部分在于脚本通常缓存在客户端。因此，我会将多个文件放在一个包中。您基本上不需要触摸默认实现。
@Stefan 谢谢，如果在性能方面最好将它们全部放在一起我不明白如何在每个视图中分别拉出它们？
一般以后不需要分开。如果脚本可以彼此相邻存在（因此脚本中没有同名的全局定义变量），您可以遵循@Georg 的回答。创建一个包并在每个页面上呈现整个包。您将拥有所有可用的 js 文件和 css 文件。
嗯，有两个方面：下载时间和执行时间。由于缩小、捆绑和缓存（缓存由客户端执行），捆绑将优化下载时间。更少的文件，更少的连接，简化的缓存 => 更高的下载速度。执行时间通常比下载时间快得多，因此（取决于设备的 cpu 和内存）这个损失相对较小。此优化仅适用于下载部分。多个脚本文件的问题是需要根据缓存机制检查更多文件，这会减慢页面渲染速度。
所以如果你不想这样做；没问题。但是，如果您因为性能损失而不想这样做，那是一种优化，我怀疑无法通过其他方式实现。

标签： c# asp.net-mvc bundling-and-minification

【解决方案1】：

是的，构建多个针对视图定制的捆绑包是正确的。

请注意，您可以将多个特定脚本/样式添加到包中：

var commonJsBundle = new ScriptBundle("~/bundles/Common/Js");
commonJsBundle.Include("~/Scripts/jquery-{version}.js");
commonJsBundle.Include("~/Scripts/jquery-ui-{version}.js");

@Scripts.Render("~/bundles/Common/Js")

因此，您不需要为每个单独的脚本打包，而是将页面（或区域）的所有自定义脚本捆绑在一起。

PS：正如 Stefan 所指出的，在下载包时，需要在包大小和浏览器支持的并行连接数之间进行权衡。因此，使用许多小包会使您的页面加载速度变慢。 Maximum concurrent connections to the same domain for browsers

【讨论】：

感谢您的回答，如果我将所有自定义脚本捆绑在一起，我不完全明白如何分别渲染它们，您能解释一下吗？
假设您有两个捆绑包：一个用于每个页面的“通用”捆绑包，一个仅用于特殊页面“page1”的自定义捆绑包“custom1”。您将在 BundleConfig.cs 中设置所有捆绑包。然后你会在你的布局页面中渲染@Scripts.Render("~/bundles/common")，这样每个页面都会得到这个公共包。而@Scripts.Render("~/bundles/custom1") 仅在第 1 页的视图中，因此只有此页面获得其特殊捆绑包。如果您为每个区域定义包，则区域中的 _ViewStart.cshtml 是加载特定于区域的包的好地方。
无法只渲染包的一部分，如果您只想使用部分脚本，则需要设置不同的包。请注意，浏览器只会缓存整个包，因此拥有多个包含相同脚本的包可能不是一个好主意。