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

Posted 2023-02-22

技术标签:

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

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

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

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

【问题讨论】：

你可以试试这个库github.com/vincpa/mvc.resourceloader 【参考方案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】：