如何选择 CDN 加载 Javascript & CSS 库？

Question

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

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

例如，examples in Bootstrap documentation show BootstrapCDN and jsDelivr, while aos's docs使用unpkg等。

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

此外，一旦我选择了 CDN 来加载脚本，是否有合理的理由让其他脚本也始终使用相同的 CDN？

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

Answer 1

如果您的使用非常通用，那么在比较 cdnjs、jsDelivr 和 unpkg.这三个都使用大型 CDN 提供商来实际分发包，并且具有相似的缓存策略。

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

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

如果您正在使用像 Webpack 这样的捆绑器，或者正在使用前端框架构建 Web 应用程序，这可以通过一些最小配置实现，并且您选择的 bundler/framework 可能有实施它的指南。

Answer 2

三点补充（除了芯片指出的内容）：

检查 CDN 使用的压缩类型（通过查找 content-encoding header。这里的首选选项通常是 br（对于 Brotli）。如果 CDN不使用 Brotli 他们可能使用 gzip。这对负载大小有直接影响，尽管 Brotli 并不总是小于 Gzip（见下面的示例）。
勾选cache-control header（一般设置的越长越好）
注意使用特定 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 功能可能会如何影响 cache-control headers（以一种会降低用户性能的方式）。例如，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。如果是这样，好处是冗余，但可能会改进并行加载。如果不是，好处是以没有 cross-platform 冗余为代价改进并行加载。 Here's more on this.

如何选择 CDN 加载 Javascript & CSS 库？

How to choose a CDN to load Javascript & CSS libraries?

javascript

css

cdn

package

libraries