为 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 可能会发生变化：Why bundle optimizations are no longer a concern in 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()));

我希望这项工作:)