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

Question

编辑澄清：

就性能（尽管我知道这仍然是一个野蛮的术语）而言，哪个更好 - 加载本地版本或 CDN 版本的 jQuery，而不是 RequireJS？

作为记录，RequireJS online doc 包含一些似乎不鼓励使用 CDN 的段落，尽管我不确定 100% 的含义：

不要在构建中混合使用 CDN 加载和 shim 配置。示例场景： 你从 CDN 加载 jQuery，但使用 shim 配置加载一些东西 就像依赖 jQuery 的 Backbone 的股票版本一样。当你这样做 构建，确保在构建文件中内联 jQuery 并且不要加载 它来自 CDN。否则，Backbone 将内联在构建的文件中 它将在加载 CDN 的 jQuery 加载之前执行。这是 因为 shim 配置只是延迟加载文件，直到 依赖项已加载，但不会对定义进行任何自动包装。 构建后，依赖项已经内联，垫片配置 不能延迟执行未定义（）的代码，直到以后。 构建后定义（）的模块确实可以与 CDN 加载的代码一起工作，因为 他们正确地将源代码包装在定义工厂函数中 在加载依赖项之前不执行。所以教训：垫片配置 是针对非模块化代码、遗留代码的权宜之计。 define() 的模块更好。

理论上，使用 CDN jQuery 文件会导致多出 1 个 HTTP 请求（不能使用 r.js 与其他 JS 文件合并），但潜在的好处是您的访问者可能已经缓存了其他的 CDN 版本他们访问过的网站。

但是，如果我从 google 搜索到的信息正确，您仍然需要为 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 文档引用专门关于使用具有 jQuery 垫片配置的脚本。如果所有脚本都是 AMD 模块，则可以从 3rd 方 CDN 动态加载基础依赖项。

缓存命中率并不像您想象的那样高（我相信雅虎对缓存与非缓存状态进行了研究），这意味着您现在必须依赖另一个域进行加载。

好处可能取决于应用程序，对其进行分析将导致最佳答案。例如，如果它是一个有很多图片的网站，那么 jquery 的策略就不那么重要了，因为图片加载可能是更明显的性能问题。

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

Answer 3

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

这对已经拥有文件缓存版本的用户有利。所以对于流行的文件（例如 jQuery javascript）我总是从 CDN 加载它。

如果 CDN 因任何原因而关闭，您始终可以添加回退到本地版本。

注意

尽管 RFC 规定用户代理最多应同时执行 2 个请求，但如今大多数用户代理都忽略了此规范。另请参阅 SO 上的this old (2009) question。请注意，用户代理目前执行的请求更多，这并不让我感到惊讶。