最高效的多页 RequireJS 和 Almond 设置答案

【问题标题】：Most Efficient Multipage RequireJS and Almond setup最高效的多页 RequireJS 和 Almond 设置
【发布时间】：2013-06-11 02:22:57
【问题描述】：

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

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

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

【问题讨论】：

请注意，8 年后选项 3 已成为事实上的行业标准 :)

标签： optimization compression requirejs r.js almond

【解决方案1】：

我认为您已经非常清楚地回答了自己的问题。

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

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

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

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

您向每个页面发送的数据最少。如果您的很多访问者都是一次，例如在登录页面中 - 这是您最好的选择。在以转化为导向的场景中，加载时间的重要性不容小觑。
您的访客是否重复？ some studies 建议 40% 的访问者带有一个空缓存。

其他注意事项：

如果您的大多数访问者访问单个页面 - 考虑选项 2。选项 3 非常适合普通用户访问多个页面的网站，但如果用户访问单个页面并且他看到的只是这些 - 那就是您的最好的选择。
如果您有很多 JavaScript。考虑加载其中的一些以给用户视觉指示，然后以延迟的方式异步加载其余部分（使用脚本标记注入，或者如果您已经在使用它，则直接使用 require）。人们注意到 UI 中“笨拙”的东西的阈值通常约为 100 毫秒。 GMail 的“正在加载...”就是一个例子。
鉴于 HTTP 连接在 HTTP/1.1 中默认为 Keep-Alive 或在 HTTP/1.0 中带有附加标头，因此与 5 到 10 年前相比，发送多个文件的问题已减少。确保从服务器为 HTTP/1.0 客户端发送 Keep-Alive 标头。

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

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

【讨论】：

感谢您的解释。我最近一直想知道最后一点——从 CDN 加载库，而不是与其他脚本连接和缩小它们。您能否将我链接到一个很好的解释，为什么有些人认为使用 CDN 更好？
stackoverflow.com/questions/2180391/… sitepoint.com/7-reasons-to-use-a-cdn johnchow.com/… 。如果这解决了您的问题，请考虑接受它。
我相信我在几分钟前接受了您的回答并授予了赏金。让我知道如果那没有发生，我猜。再次感谢。
我也发现了StackOverflow的这个问题：stackoverflow.com/questions/2180391/…
@daveclark 酷！我什至没有意识到有赏金，我只是遇到了这个问题，并认为这是一个有趣的问题，但找不到重复的问题 :) 我很高兴我提供了帮助。雅虎和谷歌的页面速度指南也是必读的。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

我不确定它是否最有效。

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

只需要配置require.config（在一个地方的各种库）
在 r.js 优化期间，然后决定将哪些模块分组为 common

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

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

【讨论】：