我想开始使用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 调用(即使他们确实这样做了,他们仍然会发出请求并获得 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,或者哪个更好。
真正的问题是:用我自己的打包第三方库,还是不打包?