将第三方JS和CSS库与我的项目资产一起打包是否有好处？

Question

我想开始使用缩小工具,如Minify,Uglify或Closure来加速我的页面加载.

我的项目依赖于几个庞大的库(jQuery,Bootstrap,...).

我正在考虑两种选择:

选项1:使用官方CDN

• 将我的项目文件仅缩小为.css一个.js文件
• 服务于着名的CDN(缩小)主要图书馆

这看起来像这样:

<script src="(my cdn)/myproject.min.js"></script>
<script src="(official cdn)/jquery.min.js"></script>
<script src="(official cdn)/jquery-ui.min.js"></script>
<script src="(official cdn)/bootstrap.min.js"></script>

<link rel="stylesheet" href="(official cdn)/bootstrap.min.css"></link>
<link rel="stylesheet" href="(my cdn)/myproject.min.css"></link>

优点:

• 访问者可能已经拥有某些库的缓存版本,由来自其他网站的相同官方CDN提供服务,从而避免了冗余传输.

缺点:

• 如果他们不这样做,这种方法将需要几个HTTP调用(即使他们实际上,他们仍然会发出请求并得到一个304 Not Modified),这将增加页面加载时间.

选项2:将所有内容组合在一起

• 将我的项目文件+每个库的源文件缩小为一个巨大的文件.

这看起来像这样:

<script src="(my cdn)/myproject-and-libraries.min.js"></script>
<link rel="stylesheet" href="(my cdn)/myproject-and-libraries.min.css"></link>

优点:

• HTTP调用的数量限制为严格的最小值.

缺点:

• 即使用户已经从其他网站加载了jQuery和Bootstrap代码,他也必须重新加载我的全部内容.

最后的说明

在任何一种情况下,我都会在AWS CloudFront上从我自己的CDN提供静态文件(只有我自己编译的文件),因此问题不在于是否使用CDN,或者哪个更好.

真正的问题是:用自己的方式打包第三方库？

Answer 1

这取决于。

您应该尝试将所有内容打包在一起，测量文件大小，并查看与单独的库文件相比节省了多少空间。您至少可以将节省的费用与其他因素进行比较。

如何平衡 HTTP 请求与总字节数很大程度上取决于您。如果您的许多用户使用移动连接，则额外的 HTTP 请求可能更值得关注，因为移动连接上往往会出现额外的延迟。

我认为在现代浏览器中的这两个选项下，HTTP 请求将并行发出（即使旧浏览器也会在每个域中同时发出两个 HTTP 请求）。不确定移动浏览器。

很难判断有多少用户在第一次访问您的网站时可能已经缓存了库 CDN 版本。我想我记得读过一些内容，表明用户数量比您想象的要少（可能是来自雅虎的一些数据，其中大约 25% 的用户缓存了这些数据），但我找不到参考资料。

值得考虑的是您期望各种文件更改的频率。如果您每周或每两周更新一次自己的 JavaScript，但将您的库和插件保持在同一版本数月/数年，那么很值得将这些文件分开，以便返回的用户不必重新下载一个大文件打包文件只是因为你改变了自己的 JavaScript 的一行。

不过说实话，如果您已经通过 CloudFront 进行压缩、gzip 压缩和服务，那么当人们从您那里下载文件时，无论如何它们都会很快下载下来。在每个用户第一次空缓存访问您的网站后，您的文件也将被缓存。总的来说，我认为您不会发现这些选项之间有很大差异。

第三方 CDN 的一个明显缺点是，如果出现问题，您根本没有能力修复它们。