如何格式化和压缩 HTML 代码

HTML 格式化和压缩是相反的操作，服务于不同的目的。格式化使代码对开发人员可读。压缩使其对浏览器变小。大多数项目都需要两者：开发中使用格式化代码，生产中使用压缩代码。同样的原则适用于您可能也使用的相关姊妹工具：CSS 格式化器/压缩器、JavaScript 格式化器/压缩器、JSON 格式化器。模式相同；只是语法不同。

格式化：使 HTML 可读

格式化器接受压缩或杂乱的 HTML，并添加适当的缩进、换行和一致的间距。这使结构一目了然。

之前：

<div class="card"><h2>标题</h2><p>这里有一些文本</p><a href="/link">阅读更多</a></div>

之后：

<div class="card">
  <h2>标题</h2>
  <p>这里有一些文本</p>
  <a href="/link">阅读更多</a>
</div>

如何格式化 HTML

1. 粘贴您的 HTML：将杂乱或压缩的代码输入格式化器。
2. 设置偏好：选择缩进大小（2 或 4 个空格）以及是否保留内联标签。
3. 复制结果：格式化的 HTML 已准备好用于您的编辑器。

压缩：使 HTML 变小

压缩器删除浏览器不需要的所有内容：空白、注释、可选的闭合标签和冗余的属性值。结果是单个紧凑的字符串。

如何压缩 HTML

1. 粘贴您的格式化 HTML：输入带缩进、注释和空白的代码。
2. 配置选项：选择是否删除注释、折叠空白和优化属性。
3. 复制压缩输出：在您的生产构建中使用它。

何时使用各项

HTML 压缩简史

HTML 于 1991 年被设计为人类可读，因此原始规范（和 1995 年的 HTML 2.0）没有为压缩做规定。压缩的想法首先从 CSS 和 JavaScript 中诞生：Douglas Crockford 的 JSMin（2001）是第一个广泛使用的 JavaScript 压缩器，删除注释和空白以减少拨号用户的文件大小。HTMLMin（npm 包）于 2009 年随后出现，然后是 htmlmin（Python）于 2013 年。现代构建工具（Webpack 2014、Vite 2020、esbuild 2020）将 HTML 压缩作为默认生产步骤。

Gzip 压缩（1999 年作为 HTTP 内容编码引入）和 Brotli（2015）压缩服务器发送的任何内容，这意味着压缩的 HTML 压缩到与格式化版本几乎相同的大小。那么为什么要压缩呢？因为压缩后的压缩版本仍然比压缩后的格式化版本小，大约 5-15%。在高流量网站上数百万次页面加载中，这加起来是真正的带宽节省，对于慢速连接用户来说是更快的首字节时间。

压缩实际删除什么

您通常在压缩器中看到的设置：

• 折叠空白：删除所有行的前导和尾随空白，并将运行的空白减少为单个空格（或标签之间为零）。
• 删除 HTML 注释：<!-- 注释 --> 块被剥离（除非注释是条件注释，如旧浏览器实际使用的 <!--[if IE]>）。
• 删除可选标签：HTML5 允许在特定上下文中省略 </li>、</p>、</td> 和其他几个。激进的压缩器剥离这些。
• 删除冗余属性值：<input type="text"> 变为 <input>（text 是默认值）。<form method="get"> 变为 <form>。
• 使用更短的布尔属性：disabled="disabled" 变为 disabled。
• 优化内联 CSS 和 JS：某些压缩器将 CSS 通过 cssnano 运行，将 JavaScript 通过 Terser 作为最后一遍运行。

输出不再是人类可读的，但在功能上与输入相同。

常见陷阱

• <pre> 和 <textarea> 空白很重要：折叠 <pre> 块（按原样显示代码或文本）内的空白会破坏可见的格式。大多数压缩器默认保留 <pre>、<textarea> 和 <script> 标签内的空白，但请验证您的压缩器是否有自定义配置。
• 影响逻辑的注释：某些构建管道使用 HTML 注释作为标记（例如，资产管道的 <!-- inject:scripts -->）。删除这些会破坏构建。配置压缩器以保留标记注释。
• HTML 内的模板语法：Handlebars {{var}}、Nunjucks {% block %}、Jinja {{ }} 和类似的模板语法可能会混淆不知道它的压缩器。使用识别您的模板引擎的压缩器，或者在模板渲染为纯 HTML 之后再压缩。
• 内联事件处理程序和 JavaScript：激进的压缩器可能会破坏内联 onclick="alert('hi')"，如果它们尝试压缩内部的 JavaScript。默认设置通常会跳过这些；在您的输出中验证。
• 编码边缘情况：太激进地剥离空白的压缩器可能会破坏非拉丁脚本，其中单词边界依赖于微妙的间距规则。使用您实际语言的内容进行测试。

何时使用一个 vs 另一个

在以下情况使用格式化器：

• 您继承了一个压缩的 HTML 文件，需要理解结构
• 您从一个剥离格式的编辑器粘贴（某些 CMS 这样做）
• 您正在结对编程或进行代码审查
• 您正在调试，需要查看标签在哪里打开或关闭

在以下情况使用压缩器：

• 您的构建管道还没有压缩（大多数现代的都有）
• 您将 HTML 内联到 JSON API 响应或电子邮件模板中
• 您将 HTML 捆绑到二进制资产（单文件 PDF、桌面应用程序安装程序）中
• 您正在优化静态站点以获得最小的可能页面权重

隐私和机密代码

格式化器和压缩器都完全在您的浏览器中运行。您粘贴的 HTML 保留在您的设备上；没有任何东西被上传。这对包含机密内容的 HTML 很重要：发布前的营销页面、内部管理仪表板、NDA 下的客户模板、揭示业务逻辑的占位符数据的部分模板。云 HTML 工具（大多数在线美化器）要求将您的 HTML 上传到他们的服务器，这正是您希望避免的敏感标记。

提示

• 在构建过程中自动化：大多数构建工具（Webpack、Vite、Gulp、Eleventy、Astro）可以在部署期间自动压缩 HTML。编写格式化代码，发布压缩代码。
• 提交前格式化：清晰、一致格式化的 HTML 使 Git diff 更易读，代码审查更快。在编辑器中将其与 Prettier 或 Beautify 配对，实现保存时格式化。
• 压缩不会破坏您的 HTML：它只删除对渲染没有影响的内容。注释、额外空白和可选标签可以安全删除。例外是 <pre>/<textarea> 内容，大多数压缩器正确保留。
• 使用语法高亮：格式化器和压缩器都提供颜色编码的语法高亮，这使得验证输出正确性更容易。
• 测试渲染输出：压缩后，在浏览器中加载页面并确认它看起来正确。压缩 bug 通常表现为缺失内容或布局损坏。