34

我在使用 RequireJS 的网站上有多个页面，并且大多数页面都有独特的功能。它们都共享许多通用模块（jQuery、Backbone 等）；它们也都有自己独特的模块。我想知道使用r.js优化此代码的最佳方法是什么。我看到 RequireJS 和 Almond 的文档和示例的不同部分提出了许多替代方案——所以我想出了以下我看到的可能性列表，我在问哪个是最推荐的（或者是否有另一种更好的方法） ：

  1. 使用Almond为整个站点优化单个 JS 文件，该文件将加载一次然后保持缓存。这种最简单方法的缺点是我将加载到每个页面上用户不需要该页面的代码（即特定于其他页面的模块）。对于每个页面，加载的 JS 都会比它需要的大。
  2. 为每个页面优化单个 JS 文件，其中包括通用模块和页面特定模块。这样我就可以在每个页面的文件中包含 Almond，并且在每个页面上只加载一个 JS 文件——这将比整个站点的单个 JS 文件小得多。不过，我看到的缺点是公共模块不会缓存在浏览器中，对吧？对于用户访问的每个页面，她都必须重新下载大量 jQuery、Backbone 等（通用模块），因为这些库将构成每个唯一单页 JS 文件的大部分。（这似乎是RequireJS 多页示例的方法，只是该示例不使用 Almond。）
  3. 为常用模块优化一个 JS 文件，然后为每个特定页面优化一个 JS 文件。这样，用户将缓存公共模块的文件，并且在页面之间浏览时，只需要加载一个特定于页面的小 JS 文件。在这个选项中，我看到了两种完成它的方法，包括 RequireJS 功能：在所有页面上的公共模块之前加载文件 require.js，使用data-main语法或普通<script>标签——根本不使用 Almond。这意味着每个页面将包含三个 JS 文件：require.js、公共模块和页面特定模块。湾。似乎这个要点正在建议一种将 Almond 插入每个优化文件的方法 ---- 这样我就不必加载 require.js，而是将 Almond 包含在我的公共模块和特定于页面的模块中。那正确吗？这比预先加载 require.js 更有效吗？

感谢您提供有关执行此操作的最佳方法的任何建议。

4

5 回答 5

35

我想你已经很清楚地回答了你自己的问题。

对于生产，我们这样做 - 以及我与选项 3合作过的大多数公司。

以下是解决方案 3 的优点，以及我认为您应该使用它的原因：

  • 它利用了最多的缓存，所有常用功能一次加载。在浏览多个页面时占用最少的流量并产生最快的加载时间。多个页面的加载时间很重要，虽然与您正在加载的其他资源相比，您这边的流量可能并不显着，但客户会真正欣赏更快的加载时间。
  • 这是最合乎逻辑的，因为站点上的大多数文件通常都具有共同的功能。

这是解决方案 2 的一个有趣优势：

  • 您向每一页发送最少的数据。如果您的很多访问者都是一次，例如在登录页面中 - 这是您最好的选择。在面向转换的场景中，加载时间的重要性不能被高估。

  • 您的访客是否重复？一些研究表明，40% 的访问者带有一个空缓存。

其他注意事项：

  • 如果您的大多数访问者访问单个页面 - 考虑选项 2。选项 3 非常适合普通用户访问多个页面的网站，但如果用户访问单个页面并且他看到的就是这些 - 这是您最好的选择。

  • 如果你有很多JavaScript。考虑加载其中的一些以给用户视觉指示，然后以延迟的方式异步加载其余部分（使用脚本标记注入，或者如果您已经在使用它，则直接使用 require）。人们注意到 UI 中“笨拙”的东西的阈值通常约为 100 毫秒。GMail 的 'loading...' 就是一个例子。

  • 鉴于 HTTP 连接在 HTTP/1.1 中默认为Keep-Alive或在 HTTP/1.0 中具有附加标头，因此与 5 到 10 年前相比，发送多个文件的问题更少。确保Keep-Alive从服务器发送 HTTP/1.0 客户端的标头。

一些一般性建议和阅读材料：

  • JavaScript 缩小是必须的，例如 r.js 就可以很好地做到这一点，并且您在使用它时的思考过程是正确的。r.js 还结合了JavaScript，这是朝着正确方向迈出的一步。
  • 正如我所建议的， 延迟JavaScript 也非常重要，并且可以大大缩短加载时间。延迟执行将帮助您的加载时间看起来更快，这非常重要，在某些情况下比实际快速加载更重要。
  • 您可以从 CDN 加载的任何内容，例如您应该从 CDN 加载的外部资源。今天人们使用的一些库，比如 jQuery，价格非常高（80kb），从缓存中获取它们真的会让你受益。在您的示例中，我不会从您的站点加载 Backbone、下划线和 jQuery，而是从 CDN 加载它们。
于 2013-06-29T23:09:27.233 回答
14

我创建了示例存储库来演示这 3 种优化。

它可以帮助我们更好地了解如何使用r.js.

https://github.com/cloudchen/requirejs-bundle-examples

于 2013-09-09T09:01:30.473 回答
1

仅供参考，我更喜欢使用选项 3，遵循https://github.com/requirejs/example-multipage-shim中的示例

我不确定它是否是最有效的。

但是，我觉得它很方便，因为：

  • 只需要配置require.config（在一个地方的各种库）
  • 在 r.js 优化期间，然后决定将哪些模块分组为通用
于 2013-06-23T11:57:18.473 回答
0

我更喜欢使用选项 3，我可以肯定地告诉你为什么会这样。

  1. 这是最合乎逻辑的。
  2. 它利用了最多的缓存，所有常用功能都加载一次。在浏览多个页面时占用最少的流量并产生最快的加载时间。多个页面的加载时间很重要，虽然与您正在加载的其他资源相比，您这边的流量可能并不显着，但客户会真正欣赏更快的加载时间。

我已经列出了更好的选择。

于 2014-08-17T10:24:21.227 回答
0

您可以使用任何内容交付网络 (CDN)，例如MaxCDN，以确保您的 js 文件能够提供给所有人。另外，我建议您将 js 文件放在 html 代码的页脚中。希望有帮助。

于 2015-05-10T06:14:04.930 回答