如何选择 CDN 来加载 Javascript 和 CSS 库？答案

【问题标题】：How to choose a CDN to load Javascript & CSS libraries?如何选择 CDN 来加载 Javascript 和 CSS 库？
【发布时间】：2020-03-29 15:31:22
【问题描述】：

为了选择特定的 CDN 将 Javascript 和 CSS 库加载到我的网站开发项目中，我应该做什么样的推理？

我看到有一些选项（即BootstrapCDN、cdnjs、unpkg、jsDelivr 以及可能的其他选项），但我不明白什么时候应该使用其中一个而不是其他选项。

例如，examples in Bootstrap documentation 显示 BootstrapCDN 和 jsDelivr，而aos's docs 使用 unpkg，等等。

我首先想到的是，它们的速度和使用量可能会有所不同（因此，如果我使用市场份额最大的那个，我将更有可能拥有我的用户已经在他们的浏览器缓存中拥有这些库），但我不确定这只是吹毛求疵，或者这些推理是否合法。

另外，一旦我选择了一个 CDN 来加载脚本，是否有正当理由总是对其他脚本使用相同的内容？

我通常使用 npm 将脚本下载到我的开发环境中，并将它们打包成一个包；但有时我想保留一个或多个非捆绑脚本（即它们在单个页面上使用，我不想在任何地方加载它们）；在这种情况下，使用 CDN 可能比在本地加载它们更好，因此我的问题是。

【问题讨论】：

如果您不为 CDN 服务付费（如果您付费了，我可以编写一个正确的答案），只需使用 Cloudflare 隐藏您的来源。不会有任何性能提升。

标签： javascript css package libraries cdn

【解决方案1】：

如果您的使用非常通用，那么在比较 cdnjs、jsDelivr 和 unpkg 等较大的名称时，您可能不会看到一个 CDN 与另一个 CDN 的巨大性能优势。这三个都使用大型 CDN 提供商来进行包的实际分发，并且具有相似的缓存策略。

考虑到一些流行的 CDN 可能已经被用户的浏览器缓存这一事实是值得的。如果您的用户专注于特定市场，则某些提供商可能会基于他们的 CDN 提供商而获得优势 - 例如，jsDeliver 使用 Quantil 作为他们的 CDN 提供商之一，该提供商在中国拥有可以提高性能的存在点针对那个市场。

这些 CDN 在不使用可以从依赖项生成捆绑包的 JS 预处理器或捆绑器的项目中非常有用。由于您已经在构建捆绑包，您还可以查看一个名为 code-splitting 的概念。这个概念会将您的捆绑包分成更小的块，并且这些块只会在您的用户在应用程序中导航时根据需要加载。这将保持一个通用的依赖管理策略（使用 package.json 和你的包管理器），而不是将两个方案与 requires 和 <script src=“...s 混合。

如果您正在使用 Webpack 之类的打包器，或者正在使用前端框架构建 Web 应用程序，则只需进行一些最低配置即可，并且您选择的打包器/框架可能有实现它的指南。

【讨论】：

谢谢，我主要需要这个来开发基于 Bootstrap 和其他一些库（aos、slick、gallery popup 等）的 Wordpress 自定义主题，并且我使用的捆绑器（Rollup）具有该功能代码拆分，我会检查一下。

【解决方案2】：

要补充的三件事（除了芯片指出的）：

检查 CDN 使用的压缩类型（通过查找 content-encoding 标头。这里的首选选项通常是 br（用于 Brotli）。如果 CDN 未使用 Brotli，他们可能会使用 @ 987654335@。这对有效负载大小有直接影响，尽管 Brotli 并不总是小于 Gzip（请参见下面的示例）。
检查cache-control 标头（通常设置得越长越好）。
请注意使用特定 CDN 功能对性能造成的影响。

示例

比较 jQuery 的 CDN、jsDelivr 和 cdnjs 提供的相同版本的 jQuery。

通过 jQuery 的 CDN (url)

compression: gzip
size: 31.0 kB
cache-control: max-age=315360000

通过 jsdelivr (url)

compression: brotli
size: 32.2 kB
cache-control: public, max-age=31536000, s-maxage=31536000, immutable

通过 cdnjs (url)

compression: brotli 
size: 28.4 kB
cache-control: public, max-age=30672000

重要提示：请注意 CDN 功能如何影响缓存控制标头（以降低用户性能的方式）。例如，Jsdelivr 有一项功能，允许您省略确切的版本字符串（例如，这样您总是可以获得最新的补丁版本）（view their features page）。如果在与上面相同的 jQuery 小版本上使用它，结果如下：

通过 jsdelivr，具有“最新补丁版本”功能 (url)

compression: brotli
size: 32.2 kB
cache-control: public, max-age=604800, s-maxage=43200

这里的重要区别是 cache-control 值，其中确切版本的 max-age 为 1 年，而另一个版本的 max-age 值为 7 天。

另外： CDN 功能可能影响性能的另一个方面是它们是否使用多个底层 CDN。如果是这样，好处是冗余，代价是可能改进的并行加载。如果不是，则好处是改进了并行加载，但代价是没有跨平台冗余。 Here's more on this.

【讨论】：