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,符合这个法案.

同时,连接文件对于不太可能发生太大变化的较小文件是有意义的 - 您常用的插件将适合此法案,但您的核心应用程序特定代码可能不适用:它可能会每周更改,如果您'重新连接所有其他文件,你必须强迫用户重新下载所有内容.

HTML5样板文件可以很好地为此提供通用解决方案:

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

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

• Angular非常受欢迎,非常大.从CDN获取它.
• Twitter Bootstrap具有相似的受欢迎程度,但你的组件选择相对较薄,如果用户还没有它,那么下载完整的东西可能不值得.话虽如此,它适合其余代码的方式非常固有,如果不重建整个网站,你就不可能改变它 - 所以你可能希望将它保存在本地,但保持它的文件与你的文件是分开的主要的plugins.js.这样,您始终可以plugins.js使用Bootstrap扩展来更新,而无需强制用户下载所有Bootstrap核心.

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