用于JS和CSS文件连接的工具

时间:2012-07-11 18:18:00

标签: javascript css concatenation minify

我最近开始使用大型代码库,每页有许多(15-20)个js请求。我的任务是优化和提高这些网站的性能。

我一直在使用Google的PageSpeed和Yahoo的YSlow等工具以及WebPageTest.org的测试来确定网站的基线速度和改进区域。我很好奇是否有一些标准或最佳实践解决方案可以连接和缩小JS和CSS文件。

我注意到:http://www.youtube.com/watch?v=30_AIEhar-I并且前20分钟非常擅长将mod_pagespeed作为一个好目标。

我正在考虑使用YUI压缩器的mod_pagespeed,也许还有一个精灵生成器。

我可能错过了哪些好工具或者我当前构建时应该关注的事情?

编辑:应该注意的是,这是一个页面中的许多(可能是数百个),并且该网站每两周收到一个新版本,因此能够自动化这种连接和缩小是必须的,我不能只是这样做一次,并称之为好。

编辑7/30/2012 - 我花了一些时间查看不同的工具,很难说哪些是最好的但是在这个时候,并没有很多人使用mod_page速度。

关闭更广泛地用于某些,但即使这是缺乏。似乎最好的方法是使用YUI插件。

还有其他地方建议使用Packer,但似乎很多人认为必须在客户端计算机上解压缩它们才能消除较小的文件大小。 This stackoverflow response是关于这些类型工具的好读物。


1 个答案:

答案 0 :(得分:2)

Google的Closure Compiler非常适合连接和缩小JavaScript。它还有一个额外的好处,就是在编译时为你编写代码,它会删除死代码,如果在docblocks中包含类型提示,它还可以执行编译时类型检查。

在某些情况下,死代码删除功能使Closure比其他缩小器具有巨大的优势......例如,考虑一下您包含库的情况,但仅使用大约10%的功能。如果您将库与项目的其余部分一起压缩,则可以删除其他90%。

至于CSS,YUI压缩器可能是你最好的选择,如果你想要一些花哨的东西。否则,您可以使用cat将文件连接在一起,并从空格中获取一些额外的字节。