打包第三方JS＆amp; 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＆amp;来自另一个网站的Bootstrap代码，他将不得不重新加载我的全部内容。

最后的注释

在任何一种情况下，我都会在AWS CloudFront从我自己的CDN提供静态文件（只有我自己编译的文件），所以问题不在于是否使用CDN，或者哪个更好。

真正的问题是：使用我自己的第三方库包装？

Answer 1

取决于。

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

如何平衡HTTP请求与总字节数相当于您。如果您的大量用户使用移动连接，则可能会更加关注其他HTTP请求，因为您可能会在移动连接上获得额外的延迟。

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

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

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

老实说，如果你已经在CloudFront中进行缩小，gzipping和提供服务，那么当人们从你那里下载文件时，无论如何他们都会很快就会崩溃。在每个用户的第一次空缓存访问您的网站后，您的文件也将被缓存。总的来说，我不认为你会发现这些选项之间存在很大差异。

第三方CDN的一个明显缺点是，如果它们出错，你根本无法修复它们。