C# 将项目的所有脚本和css捆绑在一起

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

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

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

问题是，我不想同时渲染所有脚本和css，我需要在每个视图中使用一个或两个，我知道我可以手动注册每个脚本/css，然后我将能够在每个视图中分别渲染它们：

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

---

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

是的，构建多个根据视图定制的捆绑包是正确的

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

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所指出的，在捆绑包大小和浏览器下载时支持的并行连接数量之间存在权衡。因此，使用许多小型捆绑包会降低页面加载速度

是的，构建多个根据视图定制的捆绑包是正确的

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

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所指出的，在捆绑包大小和浏览器下载时支持的并行连接数量之间存在权衡。因此，使用许多小型捆绑包会降低页面加载速度

bundler的问题是，它捆绑了所有脚本。下载多个小文件的开销相对较大。关键部分在于脚本通常缓存在客户端。因此，我会将多个文件放在一个包中。您基本上不需要接触默认的实现。@Stefan谢谢，如果从性能角度来看，最好将它们都放在一起，我不知道如何在每个视图中分别提取它们？通常以后不需要将它们分开。如果脚本可以相邻存在（因此脚本中没有具有相同名称的全局定义变量），则可以按照@Georg的答案进行操作。创建一个包并在每个页面上呈现整个包。你将拥有所有的js文件和css文件。好吧，有两个方面：下载时间和执行时间。由于小型化、捆绑和缓存（缓存由客户端执行），捆绑将优化下载时间。更少的文件、更少的连接、简化的缓存=>更高的下载速度。执行时间通常比下载时间快得多，因此（取决于设备的cpu和内存），这个代价相对较小。此优化仅适用于下载部分。多个脚本文件的问题是需要根据缓存机制检查更多的文件，这会减慢页面呈现；没问题。但是如果你不想因为性能的损失而进行优化，我怀疑这是另一种方法无法达到的。下载多个小文件的开销相对较大。关键部分在于脚本通常缓存在客户端。因此，我会将多个文件放在一个包中。您基本上不需要接触默认的实现。@Stefan谢谢，如果从性能角度来看，最好将它们都放在一起，我不知道如何在每个视图中分别提取它们？通常以后不需要将它们分开。如果脚本可以相邻存在（因此脚本中没有具有相同名称的全局定义变量），则可以按照@Georg的答案进行操作。创建一个包并在每个页面上呈现整个包。你将拥有所有的js文件和css文件。好吧，有两个方面：下载时间和执行时间。由于小型化、捆绑和缓存（缓存由客户端执行），捆绑将优化下载时间。更少的文件、更少的连接、简化的缓存=>更高的下载速度。执行时间通常比下载时间快得多，因此（取决于设备的cpu和内存），这个代价相对较小。此优化仅适用于下载部分。多个脚本文件的问题是需要根据缓存机制检查更多的文件，这会减慢页面呈现；没问题。但是，如果您不想因为性能损失而进行优化，我怀疑这是一种无法通过其他方式实现的优化。谢谢您的回答，如果我将所有自定义脚本捆绑在一起，我不完全理解如何单独呈现它们，您能解释一下吗？让我们假设您有两个捆绑包：一个“通用”每个页面上使用的捆绑包，以及仅在特殊页面“page1”上使用的自定义捆绑包“custom1”。您可以在BundleConfig.cs中设置所有捆绑包。然后，您将在布局页面中呈现

@Scripts.render（“~/bundles/common”）

，这样每个页面都会得到这个公共包。和

@Scripts.Render（“~/bundles/custom1”）

仅在page1的视图中显示，因此只有此页面才能获取其特殊包。如果按区域定义捆绑包，则该区域中的_ViewStart.cshtml是加载特定于区域的捆绑包的好地方。无法仅呈现捆绑包的一部分，如果只想使用某些脚本，则需要设置不同的捆绑包。请注意，浏览器只缓存整个捆绑包，因此使用包含相同脚本的多个捆绑包可能不是一个好主意。感谢您的回答，如果我将所有自定义脚本捆绑在一起，我不完全理解如何单独呈现它们，您能解释一下吗？让我们假设您有两个捆绑包：一个“通用”每个页面上使用的捆绑包，以及一个自定义捆绑包“custom1”，即