最好从 CDN 导入资产或将它们与自定义代码捆绑在一起？
Best to import assets from CDNs or bundle them together with custom code?
我通常使用 Gulp 将我的 CSS 捆绑为一个最小化文件，然后从 CDN 中单独导入 FontAwesome、Google 字体或插件文件等资产。下载这些第三方资产然后将它们与我们的代码捆绑在一起作为一个文件是最好的选择还是更好的性能？
所以这里的第一点是我们使用 CDN 的原因：
内容分发网络 (CDN) 的工作原理是为用户提供备用服务器节点以下载资源（通常是图片和 JavaScript 等静态内容）。这些节点遍布世界各地，因此在地理上更接近您的用户，由于延迟减少，确保更快的响应和内容下载时间。
因此，如果您计划在全球范围内托管您的网站，那么我必须说您最好使用 CDN。
替代方法是您可以像现在一样使用 gulp 下载和捆绑，但将 css 文件放到某个 cdn 上。它会提高你的表现。 （而且很便宜）
这是亚马逊云前端 link :
如果您使用的是公共共享 CDN 文件，例如https://code.jquery.com/jquery-3.2.1.min.js 用户可能已经在浏览器中缓存了该版本，因为 jQuery 在大部分网站上使用。这意味着当他们访问您的网站时，他们不必再次下载 jQuery，从而缩短加载时间。
如果您使用例如 CloudFront，这没有上述好处，但它确实意味着静态文件将更接近您的用户，这意味着检索文件的延迟更低，因此用户加载时间更快观点。
不过，我通常喜欢使用共享 CDN 文件，还包括本地回退 - see here
就像许多其他伟大问题的伟大答案一样，我们从几乎无处不在的开场白开始，"It depends..."
- 您网站的性能有多重要？
- 您选择什么时间间隔作为延迟的有意义度量（微秒、十分之一、秒？）
- 资产有多大？
- 你的观众是谁？
- 你的观众在哪里？
- 您的观众使用哪些设备？
- 你的资源多久做一次update/change？
- 等等
我也尝试压缩资源并尽量减少网络请求的数量以减少加载时间。然而，我倾向于测试各种捆绑策略，看看这些变化是否真的能产生更快的结果。那是因为要考虑的变量太多了（例如，资源是否已经在用户缓存中，例如 jQuery；CDN 速度是否足够快以抵消网络请求的减少；等等）
在您的示例中，我喜欢您为 CSS 所做的最小化。而且，我喜欢您正在考虑捆绑资产的潜在好处。尝试将此设置用于测试并获得一些数字。
我的直觉是，不靠近 CDN 特定节点的用户可能会受益（即更少的网络请求、利用 HTTP 管道等）。但是，这取决于 CDN 的质量； CDN 中的资源在其他站点上的使用频率（如@Ryan 所述，如果 CDN 资源已缓存，则 CDN 会避免重复下载）；您正在使用多少资产；资产的大小（例如，将主要样式 sheet 等基本元素与大文件捆绑在一起可能会减慢页面的呈现速度）；就感知而言，如果用户在没有捆绑的情况下会在延迟中注意到页面的渐进式呈现（即，如果用户在一瞬间看到默认字体但随后看到 Google 字体，则这很不和谐，或者他们的注意力在别处。）
最后，如果您确实测试了捆绑，请post发表评论。我们也很好奇:)
我通常使用 Gulp 将我的 CSS 捆绑为一个最小化文件，然后从 CDN 中单独导入 FontAwesome、Google 字体或插件文件等资产。下载这些第三方资产然后将它们与我们的代码捆绑在一起作为一个文件是最好的选择还是更好的性能？
所以这里的第一点是我们使用 CDN 的原因：
内容分发网络 (CDN) 的工作原理是为用户提供备用服务器节点以下载资源（通常是图片和 JavaScript 等静态内容）。这些节点遍布世界各地，因此在地理上更接近您的用户，由于延迟减少，确保更快的响应和内容下载时间。
因此，如果您计划在全球范围内托管您的网站，那么我必须说您最好使用 CDN。
替代方法是您可以像现在一样使用 gulp 下载和捆绑，但将 css 文件放到某个 cdn 上。它会提高你的表现。 （而且很便宜）
这是亚马逊云前端 link :
如果您使用的是公共共享 CDN 文件，例如https://code.jquery.com/jquery-3.2.1.min.js 用户可能已经在浏览器中缓存了该版本，因为 jQuery 在大部分网站上使用。这意味着当他们访问您的网站时，他们不必再次下载 jQuery，从而缩短加载时间。
如果您使用例如 CloudFront，这没有上述好处，但它确实意味着静态文件将更接近您的用户，这意味着检索文件的延迟更低，因此用户加载时间更快观点。
不过，我通常喜欢使用共享 CDN 文件，还包括本地回退 - see here
就像许多其他伟大问题的伟大答案一样，我们从几乎无处不在的开场白开始，"It depends..."
- 您网站的性能有多重要？
- 您选择什么时间间隔作为延迟的有意义度量（微秒、十分之一、秒？）
- 资产有多大？
- 你的观众是谁？
- 你的观众在哪里？
- 您的观众使用哪些设备？
- 你的资源多久做一次update/change？
- 等等
我也尝试压缩资源并尽量减少网络请求的数量以减少加载时间。然而，我倾向于测试各种捆绑策略，看看这些变化是否真的能产生更快的结果。那是因为要考虑的变量太多了（例如，资源是否已经在用户缓存中，例如 jQuery；CDN 速度是否足够快以抵消网络请求的减少；等等）
在您的示例中，我喜欢您为 CSS 所做的最小化。而且，我喜欢您正在考虑捆绑资产的潜在好处。尝试将此设置用于测试并获得一些数字。
我的直觉是，不靠近 CDN 特定节点的用户可能会受益（即更少的网络请求、利用 HTTP 管道等）。但是，这取决于 CDN 的质量； CDN 中的资源在其他站点上的使用频率（如@Ryan 所述，如果 CDN 资源已缓存，则 CDN 会避免重复下载）；您正在使用多少资产；资产的大小（例如，将主要样式 sheet 等基本元素与大文件捆绑在一起可能会减慢页面的呈现速度）；就感知而言，如果用户在没有捆绑的情况下会在延迟中注意到页面的渐进式呈现（即，如果用户在一瞬间看到默认字体但随后看到 Google 字体，则这很不和谐，或者他们的注意力在别处。）
最后，如果您确实测试了捆绑，请post发表评论。我们也很好奇:)