如何组织 css 和 js 文件的压缩和打包以加快网站速度？答案

【问题标题】：How to organize minification and packaging of css and js files to speed up website?如何组织 css 和 js 文件的压缩和打包以加快网站速度？
【发布时间】：2010-10-05 04:51:20
【问题描述】：

我正在为我的网站应用程序进行速度优化。我找到了一些做法来做到这一点。例如来自雅虎的Best Practices for Speeding Up Your Web Site。其中有：

缩小 JavaScript 和 CSS。
将多个文件（css、js）合二为一，最大限度地减少 HTTP 请求的数量。

我的问题是您使用或可以推荐哪些基础设施、工具和构建过程来执行这些？

【问题讨论】：

你可以试试这个库github.com/vincpa/mvc.resourceloader

标签： javascript css optimization web performance

【解决方案1】：

根据JavaScript Compression Rater，最有效的工具是YUI Compressor 或JSMin。

【讨论】：

不错的网站，但它说 Packer 3.1 适合我？
确实如此。但是打包器比 YUI Compressor 或 JSMin 的时间要长 1200 倍。
不过，这是压缩时间，与 - 也很慢 :) - 解压缩时间相比不太相关。我想这使 YUI 成为全面的最佳答案，我可能会基于此切换。 +1 先生
不知道解压时间。但我不想在每次更改后等待长达 10 分钟来压缩文件，而文件大小只会增加 1% 或 2%。

【解决方案2】：

您可以使用YUI Compressor。

它可以压缩 JavaScript 和 CSS。只需为所有文件运行它，然后将它们连接到一个“包”文件中。您可以手动执行此操作，编写 Makefile 或使用一些脚本在 Web 请求上“即时”压缩，尽管您可能希望缓存生成的文件。

【讨论】：

【解决方案3】：

Yahoo 的提示非常棒。我使用gomez 来测试优化工作的结果。缩小是一个很好的步骤。我发现通常可以通过调整页面的组合方式来产生更大的影响（特别是在减少多少图像被切割成小块以减少请求数量方面）。不管怎样，这个yahoo blog 给出了一个非常好的缩小工具纲要。我通常会远离混淆，除非除了相对较小的性能提升之外还有令人信服的理由。安装和使用缩小工具的实际步骤相对简单。

【讨论】：

【解决方案4】：

或者您可以将您的 HTTP 服务器配置为 GZIP 压缩所有文本文档。

【讨论】：

我永远无法弄清楚为什么有些人对某些答案投了反对票……这是对 OP 问题的完全合理的答案。
问题是针对压缩器和打包器的。执行这两项以及压缩将提供最佳性能。

【解决方案5】：

我使用 ASP.NET，所以我在构建过程中使用带有 NAnt 的 CruiseControl.NET。这个构建过程的一部分是使用 YUICompressor 进行压缩，根据我的经验，它是目前最好的压缩器。

如果你不做 ASP.NET，还有原来的 CruiseControl 和 Ant，你可以在相同的容量下使用。

我发现这是一个优越的设置的原因是因为 a) 所有乏味的东西都是自动化的 b) 如果你在自己的机器上进行测试，你不必调试一个超长的 JS 字符串:)

【讨论】：

【解决方案6】：

我已将缩小集成到我的部署过程中。我在 perl 中使用包 JavaScript::Minifier 和 CSS::Minifier。

在我的开发过程中，我想保持脚本的扩展。我在我的 HTML 中放了一些 cmets，以便我的脚本知道将哪些文件放在一起并缩小：

<!--- MinifyJS[js/minified-1.js] -->
<script src="..."></script>
<script src="..."></script>
<!-- end[js/minified-1.js] -->

<!--- MinifyCSS[css/minified-1.css] -->
<link ...>

几个正则表达式，我很快就得到了一个带有缩小文件的“生产”版本。

【讨论】：

【解决方案7】：

我为此编写了自己的自定义管理器。它使用 google 的闭包编译器，仅在发布模式下需要时压缩文件。看看吧：

http://www.picnet.com.au/blogs/Guido/post/2009/12/10/Javascript-runtime-compilation-using-AspNet-and-Googles-Closure-Compiler.aspx

谢谢

吉多·塔皮亚

【讨论】：

【解决方案8】：

Dean Edwards /packer/ 我自己的忠实粉丝 - 有多种口味。

【讨论】：

Packer 很酷。但是由于拆包阶段，它会延迟运行。人们现在正在远离它。
上次我对它进行基准测试并不重要，但根据 Gumbo 的帖子，我将再次查看 YUI。

【解决方案9】：

通过关注 yahoo blog 链接，我找到了一个真正的解决方案 - Niels Leenheer 的“Make your pages load faster by combining and compressing javascript and css files”。

【讨论】：

【解决方案10】：

为了在上传到网络之前压缩所有内容，这个程序对于 CSS/JS/HTML 来说都很棒：

http://www.w3compiler.com/

甚至可以选择不压缩的区域，因为并非标记中的所有 MVC 代码都支持压缩。

它会在每次压缩文件时保存备份文件，因此您只需单击一下即可轻松解压。

【讨论】：

【解决方案11】：

我发现Minify 对我的 PHP 项目最有用。非常易于使用，只需手动配置 CSS 和 JS 文件的最小化、压缩和缓存即可。还具有简洁的分组功能。

关于YUI Compressor的一些注意事项

YUI Compressor 生成时完全没有换行符，而 Minify 有一些。
如果您有转义字符串，请小心。我发现 YUI Compressor 使它们无法转义。所以像“\'”这样的字符串变成了“'”。

【讨论】：