如何选择一个CDN来加载JavaScript和CSS库

Question

选择特定的内容分发网络（Content Delivery Network，CDN）来加载JavaScript和CSS库到我的网站开发项目中，我应该进行何种推理？

我看到有一些选择（例如，BootstrapCDN，cdnjs，unpkg，jsDelivr，可能还有其他），但我不明白何时应该使用其中之一。

以Bootstrap文档中的示例为例，示例展示了BootstrapCDN和jsDelivr，而aos使用了unpkg，等等。

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

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

---

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

- Sekhemty

---

如果您没有支付CDN服务费用（如果您支付了，我可以提供一个适当的答案），只需使用Cloudflare来隐藏您的源。这样做不会带来任何性能提升。 - wick

Answer 1

除了chip提到的内容之外，还需要添加三点：

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。如果是，优点是冗余，但可能会牺牲并行加载的改进。如果不是，则优点是在不跨平台的情况下提高并行加载性能。这里有更多相关信息。

- Isaac Gregson

Answer 2

如果您的使用是相当通用的，那么比较像cdnjs、jsDelivr和unpkg这样的大品牌时，可能不会从一个CDN转换到另一个CDN看到很大的性能优势。这三个都使用大型CDN提供商来实际分发包，并具有类似的缓存策略。

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

这些CDN在不使用JS预处理器或捆绑程序可以从依赖项生成捆绑包的项目中非常有用。由于您已经构建了捆绑包，因此您还可以查看称为代码拆分的概念。此概念将将您的捆绑包拆分成较小的块，并且这些块仅在用户在应用程序中导航时需要加载。这将保持常见的依赖关系管理策略（使用package.json和包管理器），而不是混合两个方案与require和

- chip

---

谢谢，我主要需要这个来开发基于Bootstrap和其他库（如aos、slick、gallery popup等）的WordPress自定义主题，而我使用的捆绑器（Rollup）具有代码分割的功能，我会去查看一下。 - Sekhemty