Question

我对我应该使用的东西感到有点困惑，或者不知道两者是否可以/应该合并。我使用的一些库（例如jQuery）是AMD模块，而其他库（例如bootstrap）则不是，因此我不得不使用shim config来声明对jQuery的依赖。

现在，在开始学习RequireJS之前，我正在捆绑jQuery，bootstrap和其他一些非常常用的库，并在布局中加载它们。这为我提供了一个必须下载的文件。

由于我现在使用的是RequireJS，所有这些脚本都会根据每个页面的需要单独提取。我喜欢模块化代码，但是不必单独加载所有这些，即使是RequireJS异步执行它也会产生性能影响吗？

我应该以某种方式使用两种技术的组合，如果是这样，我该怎么做？

编辑：我发现这篇文章是一个例子（http://therealmofcode.com/posts/2014/03/aspnet-mvc-bundling-minification-requirejs.html），但ScriptBundle中的所有脚本都是模块，它允许RequireJS查找bundle中的所有模块。但是，我希望能够捆绑其他不是AMD模块的脚本。

Answer 1

回答问题的第一部分......

理想情况下。

单独加载脚本（异步或其他）会影响性能（更多HTTP连接），但下载更大的捆绑文件也是如此。

一般来说，向bundle添加更多KB比发出额外的HTTP请求更好。向站点范围的bundle添加更多KB比为仅在几页上使用的脚本发出新的HTTP请求更糟糕。

因此，每个站点的确切公式将有所不同，具体取决于脚本的数量，大小以及它们在整个站点中的分布。

考虑到这一点，我倾向于创建几个包，一个包含任何站点范围的脚本，另外几个包含整个站点中各个页面使用的脚本组合。

bundles.Add(new ScriptBundle("~/bundles/mainjs").Include(
      "~/Scripts/jquery-{version}.js",
      "~/Scripts/bootstrap.js",
      "~/Scripts/respond.js",
      "~/Scripts/site.js"));

bundles.Add(new ScriptBundle("~/bundles/forms").Include(
       "~/Scripts/jquery.validate*",
       "~/Scripts/dropzone.js",
       "~/Scripts/bootstrap-datetimepicker.min.js",
       "~/Scripts/trumbowyg.min.js",
       "~/Scripts/select2.min.js",
       "~/Scripts/autosize.min.js",
       "~/Scripts/forms.js"));

然后使用RequireJS加载这些捆绑的文件。

这种方法的问题是......

它破坏了RequireJS的模块化

正如您所指出的，除非每个脚本都是AMD，否则您无法使用RequireJS的捆绑功能。

所以你必须将每个捆绑包本身作为一个模块（而不是模块的集合），并使用垫片使它们彼此依赖（不过于熟悉RequireJS所以没有代码示例。）

这种方法失去了很多RequireJS的最佳功能......所以尽管它通常表现更好，但它仍然不是理想的解决方案。

不幸的是，我们将陷入这种状态，直到所有有用的库都是AMD / UMD模块（Bootstrap 4支持AMD / UMD）。

我应该使用RequireJS还是ASP.NET捆绑，还是同时使用

1 个答案:

回答问题的第一部分......

它破坏了RequireJS的模块化