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

Question

我应该做什么样的推理才能选择特定的内容分发网络 (CDN) 将 JavaScript 和 CSS 库加载到我的网站开发项目中？

我看到有一些选项（例如BootstrapCDN、cdnjs、unpkg、jsDelivr以及可能的其他选项），但我不明白何时应该使用其中一个。

例如，Bootstrap 文档中的示例显示了 BootstrapCDN 和 jsDelivr，同时aos使用了unpkg等等。

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

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

---

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

Answer 1

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

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 (网址)

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

通过 cdnjs (网址)

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-age1 年，而另一个版本max-age的值为 7 天。

另外： CDN 功能可能影响性能的另一个方面是它们是否使用多个底层 CDN。如果是这样，好处是冗余，但代价是可能改进并行加载。如果没有，好处是改进并行加载，但代价是没有跨平台冗余。这里有更多关于这个的内容。

Answer 2

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

\n\n

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

\n\n

这些 CDN 在不使用 JS 预处理器或捆绑器（可以从依赖项生成捆绑包）的项目中非常有用。由于您\xe2\x80\x99已经构建了捆绑包，因此您还可以研究一个名为 的概念code-splitting。这个概念会将您的包分割成更小的块，并且这些块只会在用户浏览应用程序时根据需要加载。这将保留通用的依赖关系管理策略（使用 package.json 和包管理器），而不是使用requires 和<script src=\xe2\x80\x9c...s 混合两种方案。

\n\n

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

\n