optimization - 最高效的多页 RequireJS 和 Almond 设置

Question

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

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

感谢您就执行此操作的最佳方式提供的任何建议。

Answer 1

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

对于生产，我们以及我合作过的大多数公司都采用选项 3。

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

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

这是解决方案 2 的一个有趣的优点:

• 您向每个页面发送的数据最少。如果您的很多访问者都只访问过一次，例如在登陆页面中 - 这是您最好的选择。在以转化为导向的场景中，加载时间的重要性怎么估计都不为过。

• 您的访客会重复吗？ some studies表明 40% 的访问者缓存为空。

其他注意事项:

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

• 如果您有大量 JavaScript。考虑加载其中一些内容以向用户提供视觉指示，然后以延迟方式异步加载其余部分(使用脚本标记注入(inject)，或者如果您已经使用它，则直接使用 require )。人们注意到 UI 中某些内容“笨拙”的阈值通常约为 100 毫秒。 GMail 的“正在加载...”就是一个例子。

• 假设 HTTP 连接是 Keep-Alive默认情况下，在 HTTP/1.1 中或在 HTTP/1.0 中使用附加 header ，发送多个文件比 5-10 年前不再是问题。确保您从服务器为 HTTP/1.0 客户端发送 Keep-Alive header 。

一些一般建议和阅读 Material :

• JavaScript minification是必须的，例如 r.js 就很好地做到了这一点，并且您使用它的思维过程是正确的。 r.js 也combines JavaScript 这是朝着正确方向迈出的一步。
• 正如我所建议的，defering JavaScript 也非常重要，可以极大地缩短加载时间。推迟执行将有助于您的加载时间看起来更快，这非常非常重要，在某些情况下比实际加载速度更快更重要。
• 您可以从CDN加载的任何内容，例如您应该从CDN加载的外部资源。人们现在使用的一些库(例如 jQuery)价格相当昂贵(80kb)，从缓存中获取它们确实会让您受益匪浅。在您的示例中，我不会从您的网站加载 Backbone、underscore 和 jQuery，而是从 CDN 加载它们。