2

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

4

4 回答 4

3

使用 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 是要走的路。

于 2013-09-30T21:31:25.757 回答
1

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

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

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

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

于 2013-09-30T22:10:48.383 回答
0

好吧，如果您对网站上的每个页面都使用一个文件，那么代码重用会很糟糕。

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

另请参阅：RequireJS 的“为什么”页面

于 2013-09-30T21:15:41.260 回答
0

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

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

最终，当为 Web 编写代码时，requirejs 有一个优化器，可以将模块丑化并组合到一个脚本中。

于 2013-09-30T21:25:17.100 回答