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

Question

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

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

举个例子，Bootstrap文档中的示例显示了BootstrapCDN和jsDelivr，而

aos

的文档使用了unpkg，等等。

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

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

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

Answer 1

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

示例

比较 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。如果是这样，好处是冗余，但代价是可能改进并行加载。如果没有，好处是改进并行加载，但代价是没有跨平台冗余。这里有更多相关内容。

Answer 2

如果您的使用非常通用，那么在比较

cdnjs

、

jsDelivr

和

unpkg

等较大名称时，您可能不会看到一个 CDN 与另一个 CDN 相比有很大的性能优势。这三个都使用大型 CDN 提供商来实际分发包，并具有类似的缓存策略。

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

这些 CDN 在不使用可以从依赖项生成捆绑包的 JS 预处理器或捆绑器的项目中非常有用。由于您已经在构建捆绑包，因此您还可以研究一个名为

code-splitting

的概念。这个概念会将您的包分割成更小的块，并且这些块只会在用户浏览应用程序时根据需要加载。这将保留通用的依赖关系管理策略（使用 package.json 和包管理器），而不是使用

require

s 和

<script src=“...

s 混合两种方案。

如果您正在使用像 Webpack 这样的捆绑器或正在使用前端框架构建 Web 应用程序，则只需进行一些最小配置即可实现，并且您选择的捆绑器/框架可能有实现它的指南。