將項目的所有腳本和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，在每個視圖中都需要一個或兩個，我知道我可以手動注冊每個腳本/ 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

是的，構建針對視圖定制的多個捆綁包是正確的。

請注意，您可以將多個特定的腳本/樣式添加到包中：

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所指出的，在捆綁包大小和瀏覽器下載時支持的並行連接數量之間需要權衡。 因此，使用許多小捆綁包會使頁面加載速度變慢。 瀏覽器到同一域的最大並發連接數