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

Question

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

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

感谢您提供的任何建议,以便最好地实现这一目标.

Answer 1

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

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

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

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

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

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

• 你的访客重复吗？一些研究表明,40%的访问者都有空的缓存.

其他考虑:

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

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

• 鉴于HTTP连接默认情况下HTTP连接是保持活动的,或者HTTP/1.0中有额外的标头,因此发送多个文件的问题比5 - 10年前少.确保Keep-Alive从服务器发送HTTP/1.0客户端的标头.

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

• JavaScript缩小是必须的,例如r.js做得很好,你使用它的思考过程是正确的.r.js还结合了 JavaScript,这是朝着正确方向迈出的一步.
• 正如我所建议的那样, 推迟 JavaScript也非常重要,并且可以大大缩短加载时间.延迟执行将有助于您的加载时间看起来很快,这非常重要,在某些情况下比实际加载快得多.
• 您可以从CDN加载任何内容,例如您应该从CDN加载的外部资源.今天人们使用的一些图书馆就像jQuery一样非常出价(80kb),从缓存中获取它们确实对你有益.在你的榜样,我也不会加载骨干,下划线和jQuery从您的网站,相反,我会从CDN加载它们.

Answer 2

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

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

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