我通常使用Gulp将我的CSS捆绑为一个最小化文件,然后从CDN中分别导入FontAwesome,Google字体或插件文件等资源。这是最好的选择还是下载这些第三方资产然后将它们与我们的代码捆绑在一起作为一个文件更好的性能?
答案 0 :(得分:5)
所以这里的第一点是我们使用CDN的原因:
内容交付网络(CDN)的工作原理是为用户提供备用服务器节点以下载资源(通常是静态内容,如图像和JavaScript)。这些节点遍布全球,因此在地理位置上更贴近您的用户,确保更快的响应和内容下载时间,因为延迟减少。
因此,如果您计划在全球范围内托管您的网站,那么我必须更好地说您使用CDN。
另一件事是你可以下载并使用gulp捆绑,因为你现在正在做,但把你的css文件放到一些cdn。它会提高你的表现。 (而且很便宜)
这是亚马逊云前端链接:
答案 1 :(得分:1)
就像许多其他伟大问题的重要答案一样,我们从几乎无处不在的开场开始,“这取决于......”
我还尝试压缩资源并尽量减少网络请求的数量,以减少加载时间。但是,我倾向于测试各种捆绑策略,以查看更改是否实际产生更快的结果。那是因为要考虑的变量太多(例如,资源已经存在于用户缓存中,例如jQuery; CDN速度是否足够快以抵消网络请求的减少;等等。)
在你的例子中,我喜欢你为CSS做的最小化。而且,我喜欢你正在考虑捆绑资产的潜在好处。尝试将此设置用于测试并获取一些数字。
我的预感是,不靠近CDN特定节点的用户可能会受益(即网络请求较少,利用HTTP流水线等)但是,这取决于CDN的质量; CDN中的资源在其他站点上使用的频率(如@Ryan所述,如果CDN资源已经缓存,则CDN可以避免冗余下载);你正在使用多少资产;资产的大小(例如,将主要样式表与大文件捆绑在一起的基本元素可能会减慢页面的呈现速度);并且就感知而言,如果您的页面的渐进式渲染是用户在没有捆绑的情况下会注意到的延迟(即,如果用户在瞬间看到默认字体然后看到Google字体,那么它是否足够震撼事情,或者是他们在其他地方的注意力。)
最后,如果你测试捆绑,请发表评论。我们也很好奇:)
答案 2 :(得分:0)
如果您使用的是常见的共享CDN文件,例如https://code.jquery.com/jquery-3.2.1.min.js
用户可能已经在浏览器中缓存了该版本,因为jQuery用于很高比例的网站。这意味着当他们访问您的网站时,他们不必再次下载jQuery,从而加快了加载速度。
如果您使用例如CloudFront,这并没有上述好处,但它确实意味着静态文件将更接近您的用户,这意味着检索文件的延迟更短,因此用户加载时间更短观点。
但是,我通常喜欢使用共享CDN文件,还包括本地回退 - see here