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来加载这些包。

由于问题在于捆绑包，因此需要在这里不起作用。您建议的方法是捆绑文件并加载它们而不阻塞？

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()));

我希望这项工作：）

寻找更好的Javascript捆绑和加载方式

2 个答案: