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

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

  1. 从CDN中拉出外部库(就像我今天所做的那样)。
  2. 将所有文件合并到一个js和一个单独的css文件中并存储在本地。

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

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

考虑到这一点,从stream行的CDN中提取一个相对较大和stream行的文件是绝对有意义的。 jQuery,以及较less程度的jQuery UI,都符合这个法案。

同时,连接文件对于那些不太可能变化很大的小文件是有意义的 – 你常用的插件可以适合这个账单,但是你的核心应用程序特定的代码可能不会这样做:它可能每周都会变化,重新连接它与所有其他文件,你必须强迫用户重新下载一切。

HTML5样板为此提供了一个通用的解决scheme:

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

对于其他主要的图书馆,你应该单独看看他们,并问自己是否应该按照jQuery的要求,单独从你自己的服务器加载,或者连接在一起。 你可能会做出这些决定的一个例子:

  • Angular非常受欢迎,而且非常大。 从CDN获取它。
  • Twitter Bootstrap的受欢迎程度相当,但是对其组件的select相对较less,如果用户尚未拥有它,则可能不值得让它们下载完整的内容。 话虽如此,它适用于其他代码的方式是相当内在的,你不可能在不重build整个站点的情况下改变它 – 所以你可能想保持它在本地托pipe,但保持它的文件与你的主plugins.js 。 这样,您可以随时使用Bootstrap扩展更新您的plugins.js ,而不用强制用户下载所有的Bootstrap核心。

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