最高效的Multipage RequireJS和Almond设置 [英] Most Efficient Multipage RequireJS and Almond setup

问题描述

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

1. 为整个网站优化单个JS文件，使用 Almond ，这将加载一次，然后保持缓存。这种最简单的方法的缺点是，我将加载到每个页面代码，用户不需要该页面（即特定于其他页面的模块）。


2. 为每个页面优化单个JS文件。
这将包括公共和页面特定的模块。这样，我可以在每个页面的文件中包含Almond，并且只会在每个页面上加载一个JS文件 - 这将显着小于整个网站的单个JS文件。但我看到的缺点是，公共模块不会在浏览器中缓存，对吧？对于每个页面，用户去她必须重新下载大量的jQuery，Backbone等（通用模块），因为这些库将构成每个唯一的单页面JS文件的大部分。 （这似乎是 RequireJS多页示例的方法，但示例不使用Almond。）

3. 针对公共模块优化一个JS文件，然后针对每个特定网页优化另一个JS文件。这样，用户将缓存公共模块的文件，并在页面之间浏览，只需加载一个小的特定页面的JS文件。在这个选项中，我看到两种方法来完成它，包括RequireJS功能：
   a。使用 data-main 语法或普通< script> 在所有页面上的公共模块之前加载文件require.js $ c>标签 - 不使用杏仁。这意味着每个页面都有三个JS文件：require.js，公共模块和页面特定的模块。
b。看来这个提示提示将Almond插入每个优化文件的方法 - 所以我不会加载require.js，而是将Almond包括在我的公共模块和我的页面特定模块中。是对的吗？这是否比加载require.js更有效率？



感谢您提供任何建议， 。

解决方案

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

对于生产，我们以及大部分使用选项3 的公司。

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

• 它使用大多数缓存，所有常见功能都已加载一次。在浏览多个网页时，流量最少，生成的加载时间最快。多个网页的载入时间很重要，而您载入的流量可能与您载入的其他资源相比并不重要，客户会非常喜欢载入速度更快。


• 这是最合理，因为网站上的大多数文件通常共享共同的功能。

这是一个有趣的优势：

• 您将最少的数据发送到每个页面。如果很多访问者是一次性的，例如在着陆页中 - 这是您最好的选择。




• 您的访问者是否重复？ 一些研究表明，40％的访问者带有一个空缓存。

其他注意事项：

• 如果大多数访问者访问单个网页 - 请考虑选项2.选项3适合于一般用户访问多个网页的网站，但如果用户访问单个网页，这是他看到的 - 这是你最好的赌注。




• 如果您有很多的JavaScript。考虑加载一些它给用户可视指示，然后以异步方式（使用脚本标记注入，或直接使用require，如果你已经使用它）以延迟方式加载其余。人们注意到的东西的阈值是笨重在UI中通常约100ms。




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

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

• JavaScript缩小是必须的，例如，r.js这很好，你的思想过程中使用它是正确的。 r.js还结合 JavaScript，这是朝正确方向迈出的一步。


• 根据我的建议，推迟 JavaScript非常重要，并可以大幅提高装载时间。延迟执行将有助于加载时间快速，这是非常重要的，在某些情况下比实际加载快得多。


• 您可以从CDN加载任何您可以从CDN加载的外部资源，例如外部资源。 一些图书馆人们今天使用jQuery是很好的出价（80kb），从缓存获取他们真的可以有益于你。在您的示例中，我不会从您的网站加载Backbone，下划线和jQuery，而是从CDN加载它们。

I have multiple pages on a site using RequireJS, and most pages have unique functionality. All of them share a host of common modules (jQuery, Backbone, and more); all of them have their own unique modules, as well. I'm wondering what is the best way to optimize this code using r.js. I see a number of alternatives suggested by different parts of RequireJS's and Almond's documentation and examples -- so I came up with the following list of possibilities I see, and I'm asking which one is most recommended (or if there's another better way):

1. Optimize a single JS file for the whole site, using Almond, which would load once and then stay cached. The downside of this most simple approach is that I'd be loading onto each page code that the user doesn't need for that page (i.e. modules specific to other pages). For each page, the JS loaded would be bigger than it needs to be.
2. Optimize a single JS file for each page, which would include both the common and the page-specific modules. That way I could include Almond in each page's file and would only load one JS file on each page -- which would be significantly smaller than a single JS file for the whole site would be. The downside I see, though, is that the common modules wouldn't be cached in the browser, right? For every page the user goes to she'd have to re-download the bulk of jQuery, Backbone, etc. (the common modules), as those libraries would constitute large parts of each unique single-page JS file. (This seems to be the approach of the RequireJS multipage example, except that the example doesn't use Almond.)
3. Optimize one JS file for common modules, and then another for each specific page. That way the user would cache the common modules' file and, browsing between pages, would only have to load a small page-specific JS file. Within this option I see two ways to finish it off, to include the RequireJS functionality: a. Load the file require.js before the common modules on all pages, using the data-main syntax or a normal <script> tag -- not using Almond at all. That means each page would have three JS files: require.js, common modules, and page-specific modules. b. It seems that this gist is suggesting a method for plugging Almond into each optimized file ---- so I wouldn't have to load require.js, but would instead include Almond in both my common modules AND my page-specific modules. Is that right? Is that more efficient than loading require.js upfront?

Thanks for any advice you can offer as to the best way to carry this out.

解决方案

I think you've answered your own question pretty clearly.

For production, we do - as well as most companies I've worked with option 3.

Here are advantages of solution 3, and why I think you should use it:

• It utilizes the most caching, all common functionality is loaded once. Taking the least traffic and generating the fastest loading times when surfing multiple pages. Loading times of multiple pages are important and while the traffic on your side might not be significant compared to other resources you're loading, the clients will really appreciate the faster load times.
• It's the most logical, since commonly most files on the site share common functionality.

Here is an interesting advantage for solution 2:

• You send the least data to each page. If a lot of your visitors are one time, for example in a landing page - this is your best bet. Loading times can not be overestimated in importance in conversion oriented scenarios.

• Are your visitors repeat? some studies suggest that 40% of visitors come with an empty cache.

Other considerations:

• If most of your visitors visit a single page - consider option 2. Option 3 is great for sites where the average users visit multiple pages, but if the user visits a single page and that's all he sees - that's your best bet.

• If you have a lot of JavaScript. Consider loading some of it to give the user visual indication, and then loading the rest in a deferred way asynchronously (with script tag injection, or directly with require if you're already using it). The threshold for people noticing something is 'clunky' in the UI is normally about 100ms. An example of this is GMail's 'loading...' .

• Given that HTTP connections are Keep-Alive by default in HTTP/1.1 or with an additional header in HTTP/1.0 , sending multiple files is less of a problem than it was 5-10 years ago. Make sure you're sending the Keep-Alive header from your server for HTTP/1.0 clients.

Some general advice and reading material:

• JavaScript minification is a must, r.js for example does this nicely and your thought process in using it was correct. r.js also combines JavaScript which is a step in the right direction.
• As I suggested, defering JavaScript is really important too, and can drastically improve loading times. Defering execution will help your loading time look fast which is very important, a lot more important in some scenarios than actually loading fast.
• Anything you can load from a CDN like external resources you should load from a CDN. Some libraries people use today like jQuery are pretty bid (80kb), fetching them from a cache could really benefit you. In your example, I would not load Backbone, underscore and jQuery from your site, rather, I'd load them from a CDN.

这篇关于最高效的Multipage RequireJS和Almond设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！