最高效的多页RequireJS和Almond设置

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文件。在此选项中,我看到两种完成它的方式,以包括RequireJS功能: a. 在所有页面上在共同模块之前加载文件require.js,使用data-main语法或普通<script>标记--根本不使用Almond。这意味着每个页面都有三个JS文件:require.js、共同模块和页面特定模块。 b. 这个代码片段似乎提出了一种将Almond插入每个优化文件的方法——因此我不必加载require.js,而是在我的共同模块和页面特定模块中都包含Almond。对吗?比预先加载require.js更有效吗?
感谢您提供的任何建议,以便最佳地完成此操作。

请注意,8年后,选项3已成为业界事实标准 :) - Benjamin Gruenbaum
5个回答

35

我认为你已经非常明确地回答了自己的问题。

对于生产环境,我们 - 以及我共事过的大多数公司都使用选项3

以下是解决方案3的优点,以及我认为你应该使用它的原因:

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

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

  • 每个页面发送的数据最少。如果您的访问者中有很多人是第一次访问,例如在落地页上 - 这是您的最佳选择。在转化为导向场景中,加载时间的重要性不可高估。

  • 您的访问者是否重复?一些研究表明,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缩小化 是必要的。例如,r.js可以很好地完成此项工作,您使用它的想法是正确的。r.js还可以 合并 JavaScript,这是朝着正确方向迈出的一步。
    • 正如我所建议的, 推迟 JavaScript 也非常重要,这可以极大地改善加载时间。推迟执行将有助于使您的加载时间看起来很快,这是一些情况下比实际快速加载更加重要的事情。
    • 任何您可以从CDN(内容分发网络)中加载的外部资源都应从CDN中加载。像jQuery等今天人们使用的某些库相当大(80kb),从缓存中获取它们可能会给您带来好处。在您的示例中,我不会从您的站点加载Backbone、underscore和jQuery,而是会从CDN中加载它们。

    1
    谢谢您的解释。我最近一直在想最后一个问题——从CDN加载库,而不是将它们与其余脚本连接和压缩。您能否给我提供一个非常好的解释,为什么有些人认为使用CDN更好? - davidtheclark
    如果您想让您的网站更快地加载,使用CDN是一个不错的选择。以下是一些关于为什么要使用CDN的文章链接:https://dev59.com/2HI95IYBdhLWcg3wtwf4 http://www.sitepoint.com/7-reasons-to-use-a-cdn/ http://www.johnchow.com/how-to-use-a-content-delivery-network-cdn-to-make-your-blog-load-much-faster/ 如果这解决了您的问题,请考虑接受它。 - Benjamin Gruenbaum
    我相信几分钟前我已经接受了你的答案并颁发了赏金。如果没有,请告诉我。再次感谢。 - davidtheclark
    我还在 StackOverflow 上找到了这个问题:https://dev59.com/2HI95IYBdhLWcg3wtwf4 - davidtheclark
    @daveclark 很酷!我甚至没有意识到有赏金,我只是偶然遇到这个问题,觉得这是一个有趣的问题,找不到重复的答案 :) 我很高兴能帮上忙。雅虎和谷歌关于页面速度的指南也是必读的。 - Benjamin Gruenbaum

    14

    1

    提醒,我更喜欢使用选项3,遵循https://github.com/requirejs/example-multipage-shim中的示例。

    我不确定它是否最有效。

    但是,我发现它很方便,因为:

    • 只需要在一个地方配置require.config(对各种库进行配置)
    • 在r.js优化期间,然后决定将哪些模块作为公共模块进行分组

    0

    我更喜欢使用选项3,并且我可以肯定地告诉你为什么。

    1. 它是最合乎逻辑的。
    2. 它利用了最多的缓存,所有常见功能只需加载一次。在浏览多个页面时,产生最少的流量和最快的加载时间。多个页面的加载时间很重要,虽然与您加载的其他资源相比,您的端上的流量可能不重要,但客户真的会感激更快的加载时间。

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


    0
    你可以使用任何内容分发网络(CDN),例如MaxCDN,以确保您的JS文件对所有人提供服务。我还建议您将JS文件放在HTML代码的页脚中。希望这能有所帮助。

    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文,
    原文链接