使用RequireJS加载jQuery - 哪个更好,本地版本还是CDN？

Question

编辑澄清:

在性能方面(虽然这仍然是一个狂野的术语,我知道),哪个更好 - 通过RequireJS加载本地版本或jQuery的CDN版本？

为了记录,RequireJS在线文档包含一些似乎阻止CDN使用的段落,虽然我不太确定100%的含义:

不要在构建中混合使用CDN加载和shim配置.示例场景:您从CDN加载jQuery但使用shim配置加载类似于依赖于jQuery的Backbone的股票版本.在进行构建时,请确保在构建的文件中内联jQuery,并且不要从CDN加载它.否则,Backbone将在构建文件中内联,并且将在加载CDN的jQuery之前执行.这是因为shim配置只会延迟加载文件,直到加载依赖项,但不会对define进行任何自动换行.在构建之后,依赖关系已经内联,shim配置不能延迟执行非define()'d代码,直到以后.define()模块在构建之后可以使用CDN加载的代码,因为它们正确地将它们的源包装在定义工厂函数中,该函数在加载依赖项之前不会执行.所以上课:shim config是非模块化代码遗留代码的一种权宜之计.define()'d模块更好.

理论上,使用CDN jQuery文件会导致另外一个HTTP请求(不能使用r.js与其他JS文件合并),但是具有潜在的好处,即访问者可能已经从其他网站缓存了CDN版本.访问过.

但是,如果我从googled信息中得到了正确的结果,你仍然需要向r.js提供一个本地jQuery副本,因为生成的缩小的JS文件仍然需要包含jQuery模块的副本以确保依赖性的一致性.这将导致在本地和CDN上加载jQuery.(希望我得到这个部分吧？)

那么,哪种方式更好？

Answer 1

简短回答:避免额外的HTTP请求和DNS查找

您最有可能最好使用自己的副本并让RequireJS合并文件.换句话说,我认为避免额外的http请求和DNS查找更有价值.

虽然用户可能已经在其缓存中从另一个站点获得该文件,但他们很可能不会.即使他们最近去过另一个站点,缓存大小通常也足够小,以至于在一两个正常浏览会话期间,用户可以轻松填满他们的缓存,在这种情况下,旧文件将被丢弃.

我认为你最多只讨论1%的流量,而且已经有高速缓存中的CDN文件,因此只有1%的用户受益.但是,通过组合这些资源并避免额外的http请求,您将使99%的用户受益.相反,如果没有合并,你会损害99%的用户.只是看待这个的另一种方式.

另一个考虑因素是移动用户...移动用户具有可怕的延迟,因此额外的http请求和dns查找的RTT具有更高的成本.

Answer 2

你的requirejs doc引用是专门关于使用具有jQuery的shim配置的脚本.如果所有脚本都是AMD模块,则从第三方CDN动态加载基本依赖项是很好的.

缓存命中率并不像你想象的那么高(雅虎我认为对缓存与非缓存状态进行了研究),这意味着你现在必须依赖另一个域来加载.

好处可能取决于应用程序,分析它将导致最佳答案.例如,如果它是一个包含大量图像的站点,那么jquery的策略就更少了,因为图像加载可能是更明显的性能问题.

我会首先将jQuery优化到构建的文件中并使用AMD模块进行所有操作,所以如果我想委托给CDN,我可以.但是,如果使用requirejs和shim配置,则需要在构建文件中内联基本依赖项,因为已调整的库不会调用define() - 它们不会等待依赖项加载,而是希望它们立即可用.

Answer 3

这不仅仅是人们缓存了该文件这一事实。用户代理只能同时从同一域加载几个文件。因此，从 CDN 加载 JS 文件可确保文件同时加载。

其次，用户已经拥有该文件的缓存版本。因此，对于流行的文件（例如 jQuery javascript），我总是从 CDN 加载它。

您始终可以向本地版本添加后备版本，以防 CDN 因任何原因发生故障。

笔记

尽管 RFC 规定用户代理最多应同时执行 2 个请求，但如今大多数用户代理都会忽略此规范。另请参阅关于 SO 的这个旧问题（2009）。请注意，用户代理当前会发出更多请求，这并不令我感到惊讶。