【问题标题】:HTML + JavaScript + CSS compact toolHTML + JavaScript + CSS 紧凑工具
【发布时间】:2026-02-01 17:10:02
【问题描述】:

我需要一个可以缩小、优化和整理这些可能类型的许多文件的工具

  • HTML(仅缩小)
  • JavaScript(缩小、优化和处理)
  • CSS(缩小)

最终结果应该是一个仅嵌入了所有 JavaScript 和 CSS 的 HTML 文件,或者在最坏的情况下分别为 HTML、JS 和 CSS 提供 3 个文件。

我知道 YUI Compressor 等工具。我目前还没有找到适用于所有这些文件类型并将它们合并到一个大文件中的压缩器类型。

【问题讨论】:

  • 目前正在试验地瓜 (digua.sourceforge.net)
  • 问题:你怎么能将所有这些合并到一个文件中? ...除非所有这些都已经在一个文件中,否则要开始?
  • 它们可以通过一个接一个地附加,轻松地与批处理/bash 脚本合并。
  • 在 HTML 中嵌入 JS+CSS 并不是最佳选择。当您有多个 HTML 页面共享相同的 JS+CSS 时,会花费更多的网络带宽。
  • 离线文档呢? pdf 文件仍然需要阅读器,而 html 几乎可以在所有设备上显示。

标签: javascript html css yui-compressor jscompress


【解决方案1】:

如果您还没有使用 gzip,请开始使用它,我们可以关闭它;)

【讨论】:

    【解决方案2】:

    我的建议是将所有 JavaScrpt 放在标题中的 <script> 中,并将所有 CSS 放在 <style> 标记中。然后尽你所能优化,然后自己最小化。没有软件能够处理所有情况。如果您尝试最小化文件大小,则只需删除换行符和不必要的空格。

    我还找到了this,它应该适用于您的文件,其中包含所有 3 个文件。

    另外请注意,如果您开始删除可选标签,您可能会遇到一些问题。一些浏览器的合作不如预期的那么好。

    【讨论】:

    • 说没有软件能够处理所有情况是一个非常大胆的声明。有哪些特殊情况会使这项任务变得如此艰巨?我能预见的最迫在眉睫的问题是 javascript 使用 css 选择器,需要将某人标记为常量,这样他们就不会受到缩小的影响。
    【解决方案3】:

    Gad,考虑一下缩小 CSS 的缺点。如果您没有编辑 normal/minify/ 的系统,则部署它可以使以后的 CSS 编辑相当冒险。

    我在一家国际银行的大型 UI 更新项目中经历了整个争论。特别是一个网站每天有 100 万以上的访问者,尽管我们尽一切努力将其保持在最低限度,但带宽数量仍然是疯狂的(每一点都在一个流量很大的网站上加起来)经过一大群非常有才华的头脑的业务分析,它是确定我们将采取几个步骤,但不进行 css 缩小,因为工程师在修复、缩小和重新部署以进行简单的 CSS 调整之前需要花费额外的时间来撤消缩小。数据表明,即使带宽提高了 5gb/天,不用支付 UI 工程师额外时间的费用仍然更便宜。

    我们不知道您网站的具体情况,但没有多少人需要担心我的示例使用的流量。在 Firebug 的新速度分析器中运行您的网站,看看缩小的真正好处是什么......现在乘以您的流量。通常,这个数字并不太可怕。花时间制作图像精灵,将 css 和 js 组合到各自的文件中(由于缓存的好处,比混入单个 php 文件更好)以限制 http 请求,并确保正确设置缓存。运行 gzip 压缩。如果在这些步骤之后你还不够好,那么将网站提升到一个新的水平。

    保持简单......它对网站生命周期的更新和维护部分产生了巨大影响。节省了时间和头痛,您可以帮助我们解决我们的问题:)

    【讨论】:

    • 谁会撤消缩小?那当然没用。一个由非常有才华的人组成的大型团队可能会发现,您应该只拥有一个开发版本和一个简单的自动化部署流程。再次撤消缩小?从来没有听说过。考虑 javascript 缩小您根本无法撤消的地方。您肯定需要一种不同的方法...
    • 在某些业务设置(例如上述设置)中,无法在代码库中保留单独的一段代码。如果我们缩小并部署该代码,它就会成为转移到主干的代码。而且,在部署过程中缩小一个单独的业务流程也是一个很大的挑战。再次,它归结为您的环境有多复杂,以及您想要让多少人参与以实现性能的微小改进。在我在那里工作之前,我无法理解如何在 3 周内改变一个角色需要 5 个人。
    • “不支付 UI 工程师的额外时间仍然更便宜” An Engineer for css = overkill imo
    • 尽管有 DailyWTF 级别的系统架构,但您永远不应该在适当的位置缩小代码。我对答案投了反对票,因为我们应该在这里提供技术上正确的答案,而不是更糟糕的情况驱动的实用主义。
    • 真的吗?每当代码更新时,一个人就不能负责“重新编译”整个站点吗?你能解释一下为什么不能在大型组织中完成吗?我的老店有。
    【解决方案4】:

    据我所知,没有这样的工具。但是,如果您在服务器端使用 PHP,您可以尝试使用 PHP Speedy(未积极开发,但有效)或 Minify 进行自动压缩、缓存和 gzipping(HTML、CSS、JS)。

    编辑:kangax 的 HTML 缩小器(正如 Badger 建议的那样)只进行 HTML 缩小。

    【讨论】:

    • 我不能使用 PHP,因为没有服务器端 :)。该项目有点奇怪,没有像 Java 或 Php 这样的服务器端。我找到了 Digua (digua.sourceforge.net) - 一个非常类似于我需要的工具。目前我正在试验它。
    【解决方案5】:

    您可以使用jsCompressor 压缩和缩小多个JavaScript 文件,使用CSS Compressor 将多个Css 文件压缩/缩小为一个文件。 为了优化您的 HTML 文件,您可以将代码的发布请求发送到 Google Clouser 服务器,该服务器使用优化的 Html 代码发送响应。

    【讨论】:

      【解决方案6】:

      http://prettydiff.com/?m=minify 将完全满足您的需求,只是它只会缩小 JavaScript 而不会混淆它。

      【讨论】:

        【解决方案7】:

        我建议您查看 html5 样板中包含的构建脚本:http://html5boilerplate.com/。只需稍加调整,它就可以完成您想做的事情。

        【讨论】: