CDN上的多个文件与本地的一个文件

Question

我的网站使用了大约10个第三方javascript库，如jQuery，jQuery UI，prefixfree，一些jQuery插件以及我自己的javascript代码。目前，我从像CDN和cloudflare这样的CDN中提取外部库。我想知道什么是更好的方法：

1. 从CDN中提取外部库（就像我今天所做的那样）。
2. 将所有文件合并到单个js和单个css文件并在本地存储。

只要有解释，任何意见都是受欢迎的。 谢谢:)）

Answer 1

CDN的价值在于用户已经访问过另一个站点的可能性，该站点从该CDN调用相同的文件，并且根据文件的大小变得越来越有价值。这种情况的可能性随着所请求文件的普遍性和CDN的普及而增加。

考虑到这一点，从流行的CDN中提取相对较大且流行的文件绝对有意义。 jQuery，以及在较小程度上，jQuery UI，符合这个法案。

与此同时，连接文件对于不太可能发生太大变化的较小文件是有意义的 - 您常用的插件将适合此法案，但您的核心应用程序特定代码可能不适用：它可能每周都会发生变化，并且如果你将它与所有其他文件连接起来，你必须强迫用户重新下载所有文件。

The HTML5 boilerplate在为此提供通用解决方案方面做得非常好：

1. Modernizr从头部加载到当地：它非常小而且 从实例到实例之间存在很大差异，所以它没有 感觉从CDN中获取它并且不会对用户造成太大伤害 从您的服务器加载它。因为CSS可能会把它放在头脑中 利用它，所以你想在它之前知道它的效果 身体渲染。其他一切都在底部，以阻止你的 更重的脚本在加载和执行时阻止渲染。
2. 来自CDN的jQuery，因为几乎每个人都使用它并且它非常沉重。用户可能已在此之前缓存此缓存 访问您的网站，在这种情况下，他们会立即从缓存中加载它。
3. 所有较小的第三方依赖项和不太可能发生变化的代码段都会连接到plugins.js 从您自己的服务器加载的文件。这将缓存一个 用户第一次访问并加载时，远程到期标头 缓存后续访问。
4. 您的核心代码位于main.js，有一个更接近的到期标头，以说明您的应用程序逻辑可能会从 每周或每月或每月。这样当你修复了一个bug或者 当用户访问两周时引入了新功能 现在，这可以加载新鲜，而上面的所有内容都可以 从缓存中引入。

对于您的其他主要库，您应该单独查看它们并问自己是否应该遵循jQuery的主导，从您自己的服务器单独加载，或者连接。一个如何做出这些决定的例子：

• Angular非常受欢迎，非常大。从CDN获取它。
• Twitter Bootstrap的受欢迎程度与此类似，但您的组件选择相对较少，如果用户尚未拥有它，则可能无法让他们下载完整的内容。话虽如此，它适合其余代码的方式非常固有，如果不重建整个网站，你就不可能改变它 - 所以你可能希望将它保存在本地但是将它的文件与你的文件分开主plugins.js。这样，您始终可以使用Bootstrap扩展更新plugins.js，而无需强制用户下载所有Bootstrap核心。

但没有必要 - 你的里程可能会有所不同。