CDN上有多个文件，本地有一个文件 [英] Multiple files on CDN vs. one file locally

问题描述

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

My website uses about 10 third party javascript libraries like jQuery, jQuery UI, prefixfree, a few jQuery plugins and also my own javascript code. Currently I pull the external libraries from CDNs like Google CDN and cloudflare. I was wondering what is a better approach:

1. 从CDN中拉出外部库（就像我今天所做的那样）。


2. 将所有文件组合成一个js和一个css文件，然后将它们存储在本地。

欢迎任何意见只要它们被解释。
谢谢：）

Any opinions are welcome as long as they are explained. Thanks :)

推荐答案

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

The value of a CDN lies in the likelihood of the user having already visited another site calling that same file from that CDN, and becomes increasingly valuable depending on the size of the file. The likelihood of this being the case increases with the ubiquity of the file being requested and the popularity of the CDN.

考虑到这一点，提取相对较大且受欢迎的文件来自流行的CDN绝对有道理。

With this in mind, pulling a relatively large and popular file from a popular CDN makes absolute sense. jQuery, and, to a lesser degree, jQuery UI, fit this bill.

同时，对于不太可能发生很大变化的较小文件，串联文件是有意义的。使用的插件将符合此要求，但是您的特定于核心应用程序的代码可能不适合：它可能每周更改一次，并且如果您将其与所有其他文件连接在一起，则必须强制用户下载一切都再次发生。

Meanwhile, concatenating files makes sense for smaller files which are not likely to change much — your commonly used plugins will fit this bill, but your core application-specific code probably doesn't: it might change from week to week, and if you're concatenating it with all your other files, you'd have to force the user to download everything all over again.

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

The HTML5 boilerplate does a pretty good job of providing a generic solution for this:

1. Modernizr已加载从头到本地：它很小，每个实例的
   差异很大，因此从CDN上获取它不会使
   有意义，也不会对用户造成太大伤害
   从您的服务器加载它。它之所以被放在首位，是因为CSS可能会利用
   来使用它，因此您希望在
   主体渲染之前就知道它的效果。其他所有内容都在底部，以阻止您的
   较重的脚本在加载和执行时阻止渲染。


2. CDN中的jQuery，因为几乎每个人都在使用它，而且它很重。用户
   访问您的网站之前可能已经将其缓存了，在这种情况下，他们将立即从缓存中加载它。


3. 所有较小的第三方依赖和代码段那些变化不大的文件将连接到从您自己的服务器加载的 plugins.js
   文件中。第一次用户访问时，将使用
   的远程过期标头来缓存，并在以后的访问中从
   缓存加载。


4. 您的核心代码在<$ c中$ c> main.js ，具有更接近的到期标头，以说明您的应用程序逻辑可能从
   到周或从一个月到一个月变化。这样，当您修复了错误或
   引入了新功能后，用户现在从
   进入两周访问时，可以重新加载，而上面的所有内容都可以从缓存中带来
   

1. Modernizr is loaded from local in the head: it's very small and differs quite a lot from instance to instance, so it doesn't make sense to source it from a CDN and it won't hurt the user too much to load it from your server. It's put in the head because CSS may be making use of it, so you want it's effects to be known before the body renders. Everything else goes at the bottom, to stop your heavier scripts blocking rendering while they load and execute.
2. jQuery from the CDN, since almost everyone uses it and it's quite heavy. The user will probably already have this cached before they visit your site, in which case they'll load it from cache instantly.
3. All your smaller 3rd party dependencies and code snippets that aren't likely to change much get concatenating into a plugins.js file loaded from your own server. This will get cached with a distant expiry header the first time the user visits and loaded from cache on subsequent visits.
4. Your core code goes in main.js, with a closer expiry header to account for the fact that your application logic may change from week to week or month to month. This way when you've fixe a bug or introduced new functionality when the user visits a fortnight from now, this can get loaded fresh while all the content above can be brought in from cache.

对于其他主要库，您应该单独查看它们并问自己是否应该遵循jQuery的指导，并分别从您自己的服务器，或者将其连接起来。有关如何做出这些决定的示例：

For your other major libraries, you should look at them individually and ask yourself whether they should follow jQuery's lead, be loaded individually from your own server, or get concatenated. An example of how you might come to those decisions:

• Angular非常受欢迎，而且非常庞大。从CDN中获取它。


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

• Angular is incredibly popular, and very large. Get it from the CDN.
• Twitter Bootstrap is on a similar level of popularity, but you've got a relatively slim selection of its components, and if the user doesn't already have it it might not be worth getting them to download the full thing. Having said that, the way it fits into the rest of your code is pretty intrinsic, and you're not likely to be changing it without rebuilding the whole site — so you may want to keep it hosted locally but keep it's files separate from your main plugins.js. This way you can always update your plugins.js with Bootstrap extensions without forcing the user to download all of Bootstrap core.

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

But there's no imperative — your mileage may vary.

这篇关于CDN上有多个文件，本地有一个文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！