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

Posted 2023-03-10

【中文标题】用于连接 JS 和 CSS 文件的工具

【英文标题】：Tools for JS and CSS file concatenating

【发布时间】：2012-07-11 10:31:36

【问题描述】：

我最近开始使用大型代码库，每页有许多 (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，也许还有一个 sprite 生成器。

我可能错过了哪些好工具，或者我在当前构建中应该关注的事情是什么？

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

编辑 2012 年 7 月 30 日 - 我花了一些时间研究不同的工具，很难说哪些是最好的，但目前使用 mod_page 速度的人并不多。

闭包在某些方面被更广泛地使用，但即使这样也缺乏。似乎最好的方法是使用带有 YUI 的插件。

还有其他地方建议使用Packer，但似乎许多人认为较小的文件大小可以通过在客户端计算机上解压缩它们来消除。 This *** response 是关于这些类型工具的好书。

---

【问题讨论】：

为什么说缺少Closure？

【参考方案1】：

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

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

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

【讨论】：

我选择 YUI 的部分原因是文档非常好，而且非常有弹性。有没有办法自动化闭包编译器？我从网站上的一个页面开始，但不幸的是，数百个归属页面需要像这样被剥离，所以自动化是必须的。

Closure 是一个在命令行上运行的 Java 可执行文件 (jar)，因此自动化它只需从构建脚本或类似文件中调用它。他们的online documentation 非常好，符合您对 Google 的期望。看看“高级优化”功能；这就是事情变得有趣的地方。

有趣，我将对此进行更多调查。谢谢你的指导！