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

Question

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

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

欢迎大家提出意见，只要解释清楚。 谢谢:)

Answer 1

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

考虑到这一点，从流行的 CDN 中提取相对较大且流行的文件绝对有意义。 jQuery 以及程度较低的 jQuery UI 符合此要求。

与此同时，连接文件对于不太可能发生太大变化的较小文件很有意义——您常用的插件将符合此要求，但您的核心应用程序特定代码可能不符合:它可能每周都在变化，并且如果您将它与所有其他文件连接起来，则必须强制用户重新下载所有内容。

The HTML5 boilerplate很好地为此提供了通用解决方案:

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

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

• Angular 非常受欢迎，而且非常庞大。从 CDN 获取。
• Twitter Bootstrap 具有相似的流行程度，但它的组件选择相对较少，如果用户还没有安装它，可能不值得让他们下载完整的组件。话虽如此，它适合您的其余代码的方式是非常固有的，并且您不可能在不重建整个站点的情况下更改它 - 因此您可能希望将它保留在本地托管但将其文件与您的文件分开主 plugins.js。这样您就可以随时使用 Bootstrap 扩展更新您的 plugins.js，而无需强制用户下载所有 Bootstrap 核心。

但这并不是必须的——你的里程可能会有所不同。