6

我想开始使用Minify、Uglify或Closure等缩小工具来加快页面的加载速度。

我的项目依赖于几个庞大的库（jQuery，Bootstrap，...）。

我正在考虑两种选择：

选项 1：使用官方 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 调用（即使他们确实这样做了，他们仍然会发出请求并获得 a 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，或者哪个更好。

真正的问题是：用我自己的打包第三方库，还是不打包？

4

1 回答 1

3

这取决于。

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

如何平衡 HTTP 请求与总字节数几乎取决于您。如果您的许多用户都在移动连接上，那么额外的 HTTP 请求可能会更令人担忧，因为您往往会在移动连接上获得额外的延迟。

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

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

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

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

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

于 2013-02-14T12:13:07.283 回答