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

Question

我在 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需要一两个，我知道我可以手动注册每个script/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")
}

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

Answer 1

是的，构建多个为视图量身定制的包是正确的。

请注意，您可以将多个特定 scripts/styles 添加到捆绑包中：

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

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

Bundling all the Scripts and css of the project together

c#

asp.net-mvc

bundling-and-minification