最高效的多页面要求和杏仁设置

Question

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

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

感谢您提供有关实现这一目标的最佳方式的任何建议。

Answer 1

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

对于生产，我们 - 以及我使用选项3 的大多数公司。

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

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

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

• 您向每个页面发送最少的数据。如果您的很多访问者都是一次，例如在目标网页中 - 这是您最好的选择。在面向转换的场景中，加载时间的重要性不容小觑。

• 您的访客是否重复？ some studies表示有40％的访问者拥有空缓存。

其他考虑因素：

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

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

• 鉴于HTTP / 1.1中默认情况下HTTP连接为Keep-Alive或HTTP / 1.0中有额外的标头，发送多个文件的问题比5 - 10年前少。确保从服务器为HTTP / 1.0客户端发送Keep-Alive标头。

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

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

Answer 2

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

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

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

Answer 3

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

中的示例

我不确定它是否效率最高。

然而，我发现它很方便，因为：

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

Answer 4

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

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

我列出了更好的选择。

Answer 5

您可以使用MaxCDN之类的任何内容投放网络（CDN）来确保将js文件提供给所有人。另外我建议你把你的js文件放在你的html代码的页脚里。希望有所帮助。