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

Question

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

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

作为一个实例，自举文档中的示例示出BootstrapCDN和jsDelivr，而aos的文档使用unpkg，并在如此。

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

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

---

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

Answer 1

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

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

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

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

Answer 2

要添加的三件事（除了芯片指出的内容）：

1. 检查 CDN 使用的压缩类型（通过查找content-encoding标头。这里的首选选项通常是br （对于 Brotli）。如果 CDN 不使用 Brotli，他们可能会使用gzip 。这有直接影响在有效载荷大小方面，尽管 Brotli 并不总是小于 Gzip（参见下面的示例）。
2. 检查cache-control标头（通常设置的越长越好）。
3. 请注意因使用特定 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 有一项功能，它允许您省略确切的版本字符串（例如，以便您始终可以获得最新的补丁版本）（查看其功能页面）。 如果在与上面相同的 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。 如果是这样，好处是冗余，代价是可能改进并行加载。 如果没有，好处是改进并行加载，但不会产生跨平台冗余。 这里有更多关于这个。