CDN上有多个文件，本地有一个文件

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

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

只要有解释，任何意见都是值得欢迎的。谢谢 ：）

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

考虑到这一点，从流行的CDN中提取相对较大且流行的文件绝对有道理。jQuery和较小的jQuery UI都适合此要求。

同时，串联文件对于较小的文件是有意义的，这些文件不太可能发生很大变化-您常用的插件将符合此要求，但是您的核心应用专用代码可能不会这样做：它可能每周更改一次，如果您将其与所有其他文件重新连接，则必须强制用户重新下载所有内容。

HTML5样板在提供通用解决方案方面做得很好：

1. Modernizr是从本地的头部加载的：它很小，并且因实例而异，所以从CDN上获取它没有任何意义，因此从您的CDN加载它不会对用户造成太大的伤害服务器。由于CSS可能正在使用它，因此它放在了头部，因此您希望在渲染主体之前就知道它的效果。其他所有内容都在底部，以阻止较重的脚本在加载和执行时阻止渲染。
2. CDN中的jQuery，因为几乎每个人都在使用它，而且它很重。用户在访问您的站点之前可能已经对此进行了缓存，在这种情况下，他们将立即从缓存中加载它。
3. 您所有较小的第三方依存关系和不太可能发生很大变化的代码段都会串联到一个 plugins.js 从您自己的服务器加载文件中。第一次用户访问时，将使用一个遥远的到期标头来缓存它，并在以后的访问中从缓存中加载。
4. 您的核心代码进入main.js，具有更接近的到期标头，以说明您的应用程序逻辑可能每周或每月或每月更改的事实。这样，当您修复了错误或在用户从现在开始两周访问时引入了新功能时，可以重新加载该文件，同时可以将所有以上内容从缓存中引入。

对于您的其他主要库，您应该单独查看它们，并问自己它们是否应该遵循jQuery的指导，从您自己的服务器中单独加载或被串联。有关如何做出这些决定的示例：

• Angular非常受欢迎，而且非常大。从CDN获取它。
• Twitter Bootstrap处于类似的流行程度，但是您对其组件的选择相对较小，如果用户还没有，它可能不值得让他们下载完整内容。话虽这么说，它适合您其余代码的方式是固有的，并且在不重建整个网站的情况下您不可能更改它-因此您可能希望将其保留在本地，但将文件与您的文件分开主要plugins.js。这样，您始终可以plugins.js使用Bootstrap扩展名更新自己，而不必强制用户下载所有Bootstrap核心。

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