尋找更好的Javascript捆綁和加載方式

Question

我正在使用asp.net mvc 5.我已經在服務器上制作了各種捆綁包，因為每個頁面都需要不同的文件集。

        bundles.Add(new Bundle("~/scripts/external/4")
       .Include(
       "~/Static/Scripts/External/jquery-2.1.3.min.js",
        "~/Static/Scripts/External/jquery-ui.min.js",
        "~/Static/Scripts/External/bootstrap.min.js",
          //and 13 more files
        ));

        bundles.Add(new Bundle("~/scripts/admin/external/1")
       .Include(           
      "~/Static/Scripts/External/jquery-2.1.3.min.js",
       "~/Static/Scripts/three.min.r76.js",                
        "~/Static/Scripts/app.min.js",
       //and 15 more files
      ));

正如您所看到的，一些js文件正在重復（有時候共有4,5個大文件），因為它們無法交叉引用。

我在客戶端使用lab.js來加載這些包。

由於捆綁問題，Requirejs不會在這里工作。 您建議的方法是捆綁文件並加載它們而不阻塞？

Answer 1

我認為這在很大程度上取決於應用程序的結構。 擁有多個捆綁包的原因是什么？ 如果要在未使用的頁面上加載腳本，這應該不是問題。

通常我會將大多數供應商腳本（例如您的示例中的jQuery）組合在一起，因為它們在網站的大多數頁面中都是必需的。 然后，如果站點的某個部分需要另一組腳本，我會將這些腳本組合在一起。 這樣，它們被提取一次，然后從緩存中緩存和檢索。 擁有許多不同的捆綁包意味着文件將是唯一的，因此不會被緩存。 我認為擁有一些大文件比許多小文件更好。

作為旁注，我不喜歡ASP.NET的捆綁並使用諸如gulp或grunt之類的任務運行器來創建捆綁包，但是同樣的設置也可以在ASP MVC中完成。

但HTTP / 2事情可能會發生變化： 為什么捆綁優化不再是HTTP / 2中的問題

Answer 2

我認為在一個列表中加載所有庫並獲得不同的值是最好的方法：

List<string> bundlesList = new List<string>();
bundlesList.Add("~/Static/Scripts/External/jquery-2.1.3.min.js");
bundlesList.Add("~/Static/Scripts/External/jquery-2.1.3.min.js");
bundlesList.Add("~/Static/Scripts/External/jquery-ui.min.js");
bundlesList.Add("~/Static/Scripts/External/bootstrap.min.js");
bundlesList.Add("~/Static/Scripts/External/bootstrap.min.js");

IEnumerable<string> ids = (from x in bundlesList select x).Distinct();

bundles.Add(new ScriptBundle("~/bundles").Include(ids.ToArray()));

我希望這項工作:)