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

Question

我的网站使用约10个第三方JavaScript库，如jQuery，jQuery UI，prefixfree，几个jQuery插件以及我自己的JavaScript代码。目前，我从CDN（如Google CDN和cloudflare）中提取外部库。我想知道什么是更好的方法：

1. 从CDNs拉外部库（就像我今天做的）。
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内核。

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