UglifyJS 可以替代 RequireJS 吗？答案

【问题标题】：Can UglifyJS be a replacement for RequireJS?UglifyJS 可以替代 RequireJS 吗？
【发布时间】：2013-09-30 21:07:38
【问题描述】：

老实说，我不明白 RequireJS 的好处。如果我使用 UglifyJS 缩小和连接我的所有文件并将单个生成的 JS 文件放在关闭 </body> 标记之前，我还需要使用 RequireJS 吗？除了为我的页面大小增加 15KB 之外，RequireJS 还提供了哪些 UglifyJS 无法获得的好处？

【问题讨论】：

来自require.js homepage：“使用像 RequireJS 这样的模块化脚本加载器将提高代码的速度和质量”。我认为这说明了一切。也许还可以阅读Why modules 和Why AMD。
另见：stackoverflow.com/questions/11531091/…
来自上述问题：“如果您的大型 web 应用程序可以将模块子集的加载推迟到稍后时间（例如，在特定用户操作之后），这些模块可以单独优化并在生产中异步加载。 "

标签： javascript requirejs uglifyjs

【解决方案1】：

使用 requireJs 的要点是有一个理智的方式来模块化你的代码。假设您有一个包含数千行代码的应用程序，您不想在一个文件中处理所有这些。因此，如果您开始将其拆分为不同的文件，您需要一种以正确顺序加载所有单个文件的方法。当然，您可以自己创建 20 个脚本标签并确保它们的顺序正确，但是随着代码的增长，您必须添加更多脚本标签，并且您必须为每个文件找到正确的位置。这就是 requireJs 的用处。

假设你有 3 个脚本 A.js 依赖于 B.js，而 B.js 又依赖于 C.js

使用脚本标签看起来像这样：

<script src="C.js"></script>
<script src="B.js"></script>
<script src="A.js"></script>


//A.js
  console.log('A' + B)
//B.js    
  B = 'B' + C
//C.js
  C = 'C'
})

使用requireJs

<script src="require.js" data-main="A.js"></script>

并在每个脚本中声明依赖项：

//A.js
require(['B.js'], function (B) {
  console.log('A' + B)
})
//B.js    
define(['C.js'], function (C) {
  return 'B' + C
})
//C.js
define([], function () {
  return 'C'
})

这是一个非常简单的示例，但重点是您不必关心模块的顺序，因为 requireJs 会以正确的顺序加载。

回到您的问题，优化器更多的是附加功能，因此，如果您有一个适合单个文件且仍可维护的小型代码库，则只需使用 uglifyJs。但是如果你想把你的代码拆分成模块 requireJs 是最好的选择。

【讨论】：

【解决方案2】：

UglifyJS 和 RequireJS 有非常不同的用途，两者都可以适用于您的情况。

RequireJS 和一般的异步模块定义背后的想法是将您的代码分成更小的块，以使其更易于管理。在性能方面，它有两个主要好处：

加载速度更快，因为您可以并行加载多个块
占用空间更小，因为您只加载当前上下文中真正需要的代码部分

一个很好的例子是图表库。浏览器使用不同的标准来呈现图形：svg、vml、canvas 等。图表库将为这些标准中的每一个提供代码，但在运行时它只会加载与特定设备和浏览器相关的部分。

【讨论】：

【解决方案3】：

好吧，如果您为网站上的每个页面使用一个文件，那么代码重用将是糟糕的。

您不希望将相同的代码复制/粘贴到每个页面上。这些文件也不会被缓存，这会大大增加您的页面加载时间。

另请参阅：RequireJS's "why" page

【讨论】：

我认为 OP 是指单个 main.min.js 站点包，而不是每页一个脚本。

【解决方案4】：

使用 requirejs，您可以在 JS 中拥有与其他编程语言相同的开发过程。

您可以编写模块，这些模块可以轻松地用于其他项目，只需引用它们的包含文件。

最终，当为 Web 编写代码时，requirejs has an optimizer 将丑化模块并将其组合到一个脚本中。

【讨论】：