Does HTML Minifier work with large files?

Yes, since it runs in your browser, it can handle reasonably large inputs. Performance depends on your device's capabilities.

可以在移动设备上使用吗？

Yes, this tool works on any device with a modern browser including phones and tablets.

Will minification break my HTML?

No, the minifier only removes content that does not affect rendering, such as comments, extra whitespace, and redundant attribute values. The output is functionally identical to the original HTML.

是否有文件大小限制？

There is no hard server limit since all processing happens in your browser. However, very large files (over 50 MB) may be slower depending on your device memory and processor speed.

Does minification affect inline CSS or JavaScript?

This tool focuses on HTML-level minification such as collapsing whitespace between tags and removing comments. For best results, minify your CSS and JavaScript separately using dedicated minifiers.

HTML 压缩器，免费

通过移除注释、空白和简化属性来压缩 HTML 代码。

移除注释压缩空白移除属性引号简化布尔属性

输入 HTML

压缩后的输出

为什么 HTML 压缩在 2026 年依然重要

HTML 是浏览器在每次页面加载时第一时间下载、解析和渲染的东西。HTML 文档处于关键渲染路径上:浏览器在解析出足够的 HTML 来识别 CSS、JS 或图片之前,无法开始抓取它们。每多传输并解析一千字节的 HTML,都会拖慢 Time to First Byte(TTFB)与 Largest Contentful Paint(LCP),这是 Google 用作排名信号的三大 Core Web Vitals 中的两个。HTML 压缩去掉的是人类为了可读性放进去的字节(标签之间的空白、注释、冗余的属性写法),并不会改变浏览器看到的东西。CDN 边缘的 Gzip 与 Brotli 压缩会处理掉大部分体积,重复出现的标签名压缩起来非常漂亮,但在它之上再做一层压缩通常仍能省下5-15% 的额外字节,因为压缩器看不到那些语义上已经死掉的字节(它们会被压缩成相似但不相同的输出)。这听起来很小,直到你把它乘以一个高流量站点每一个页面请求,带宽账单与 LCP 改善在规模上都很有分量。

有两种互补的情况下收益更大:一是服务端渲染的页面(Next.js、Remix、Hugo、Eleventy),HTML 每次请求都重新生成,框架模板里常常带着慷慨的缩进与有用的注释;二是静态站点构建,压缩在构建时跑一遍,从此终身受益。现代静态站点生成器都把 HTML 压缩作为构建时选项:Hugo 的 --minify 标志在 v0.47(2018 年 8 月 17 日)落地,Eleventy 通过插件使用 html-minifier-terser,Next.js 通过 SWC 应用,Astro 3.0 内置 HTML 压缩并可叠加可选的 astro-compress 集成。对于手写 HTML 或没有构建管线的模板,这个浏览器内压缩工具就是阻力最小的路径。

压缩工具实际做了什么

元素之间空白的折叠。标签之间的空格与换行被剥掉,在安全的情况下 <p> Hello </p> 变成 <p>Hello</p>。"在安全的情况下"这个限定很重要:行内元素(<span>、<a>、<em>)之间的空白会被渲染(所以"foo bar"应该保留 span 之间的那个空格)。块级元素(<div>、<p>)之间的空白通常不会。
注释删除。 块会被剥掉。条件注释()在出现时会被保留,尽管 Microsoft 从 Internet Explorer 10 起已移除条件注释处理,在任何不再支持 IE9 或更早的站点上也可以放心删除。
属性简化。当属性值不含空白、不含 >、不含 =、也不含任何形式的引号时,属性的引号会被去掉:class="btn" 变成 class=btn。布尔属性会被简化:disabled="disabled"、checked="checked"、selected="selected"、readonly="readonly" 都缩成属性名本身。默认属性值会被丢弃:input 上的 type="text"、script 标签上的 type="text/javascript"、表单上的 method="get"。
空元素仍然是空的。<br>、<hr>、<img>、<input>、<meta> 与 <link> 在 HTML5 中没有闭合标签。XHTML 的自闭合斜杠(<br />)会被去掉:<br /> 变成 <br>。
受保护的内容。<pre>、<textarea>、<script> 与 <style> 的内容会原样保留,因为它们的空白是有意义的。内联 JavaScript 与 CSS 需要各自的压缩遍(由独立工具完成)。

那些会咬人的空白敏感场景

HTML 压缩里最大的风险,是把重要的空白也折叠掉。带有周边空白的行内元素会把那个空白渲染成可见的空格;foo <em>bar</em> baz 中 bar 两侧有空格;如果压缩器把这些空格折成空,渲染出的文本就变成"foobarbaz"没有分隔。保守的压缩器始终在文本与行内元素之间保留一个空格;激进的(关闭 conservativeCollapse: true)会把它去掉。带 CSS white-space: pre 的元素内部的空白同样会被渲染;压缩器看不到 CSS 规则,可能会错误折叠。条件注释里被去掉的注释会破坏老旧站点的 IE 特定行为。用作构建标记的注释(Vue 的 )需要在压缩遍中存活。现代压缩器能处理这些情况;只用正则的方式(本工具)是保守的,会保留受保护块内部的空白,但没有完整的行内 vs 块级感知能力。对于行内元素密集的散文型生产页面,部署前请测试压缩输出。

HTML5 的宽松语法,以及为什么 XHTML 输了

HTML5 的宽松正是让压缩成为可能的根本。XHTML(被弃置的 XML 语法 HTML 变体)要求严格语法:每个标签都闭合、每个属性都加引号、每个属性都小写。XHTML 2.0 在其 W3C 章程于 2009 年 7 月 2 日到期时被放弃;HTML5 在 2014 年 10 月 28 日成为 W3C Recommendation。HTML5 故意允许多种等价语法:<br> 与 <br/> 都合法;input 上的 type="text" 是默认值,可以省略;当值简单时 class=btn 周围的引号是可选的。这种宽松正是压缩器要利用的:每一个"可选的"语法元素都是压缩器可以丢掉的字节。代价是压缩后的 HTML 对人来说更难读(没关系,因为除了通过"查看源代码",没人会去读生产环境的 HTML)。

HTML 压缩工具简史

Will Peavy 的 HTMLMinifier(willpeavy.com 上的工具,2000 年代中期到约 2010 年)是最早、被引用最多的浏览器内 HTML 压缩工具,是一个把粘贴进来的 HTML 输出为精简版的单页工具。kangax 的 html-minifier(Juriy "kangax" Zaytsev,2010 年 3 月 9 日在 Perfection Kills 博客上宣布)是第一个真正成熟的 Node.js HTML 压缩器;在差不多十年里它都是 Node 圈的标准工具,被 webpack-html-plugin、Gulp 流水线和大多数静态站点生成器使用。kangax 最后一个 release 是 2019 年 4 月 1 日的 v4.0.0;该仓库自 2021 年起实质上停止维护,但并未正式归档。html-minifier-terser(由 Daniel Ruf 维护,kangax、Alex Lam 等持续贡献)是接棒 kangax 持续维护的 fork;今天 webpack-html-plugin 默认就用它,大多数构建管线实际跑的也是它。Wilson Lin 的 minify-html 是基于 Rust 的压缩器,在大型 HTML 输入上性能明显更好。tdewolff/minify 是 Hugo 与各种基于 Go 的静态站点生成器使用的 Go 替代品。swc 与 Lightning CSS 在各自的 Rust 工具链中也有 HTML 支持,分别被 Next.js(自 Next.js 12 起从 Babel 切换到 SWC)和 Parcel 使用。html-minifier-next(2025 年 7 月 10 日通过 GitHub issue #1165 宣布)是较新的 kangax 派生 fork,一些项目正在迁移过去。

邮件 HTML,另一个世界

邮件 HTML 是它自己的压缩雷区。邮件客户端的解析器以五花八门著称:Outlook 2007-2019 使用 Microsoft Word 的 HTML 渲染(为字处理文档设计,而非为网页),Gmail 会去掉超过某个大小阈值的 <style> 标签,Apple Mail 与 Yahoo Mail 更接近 Web 标准。Web HTML 的压缩规则并非全部适用于邮件:去掉标签之间的空白可能破坏 Outlook 的布局;去掉可选引号可能破坏部分 webmail 解析器;去掉内联 <style> 标签上的 type="text/css" 属性可能被 Gmail 静默丢弃。邮件"合适"的压缩级别远比 Web HTML 保守,通常只去注释和空白,其余原样保留。MJML 与 Foundation for Emails 这类邮件专用工具会在编译时处理邮件 HTML 的怪癖;在 Mailchimp 模板上跑一个通用的 Web HTML 压缩器,八成会在 Outlook 里把它弄坏。

AMP HTML 与"先校验"的思路

Google 的 Accelerated Mobile Pages 项目(2015 年 10 月 7 日发布)走的是相反的路:不是事后压缩,而是在结构上就把 HTML 限制成一个本身就小的严格子集。AMP 要求一个内联的 <style amp-custom> 块(2020 年 3 月 13 日起最大 75 KB,从 50 KB 提升而来),除 amp-script 外禁止大部分 JavaScript,并使用严格的校验器去强制所有规则。该项目在 2021-2022 年随着 AMP 轮播条带的排名利好削弱被去优先级化,许多发行商已经放弃 AMP,转向常规的压缩 + 优化 HTML;它依然被那些依赖 Google Discover 流量的新闻发行商使用。它对一个通用 HTML 压缩器的意义在于,AMP 展示了一个对字节高度敏感的 HTML 标准的样子:有主张、由校验器强制、并且小。

诚实的范围:这个工具做什么、不做什么

本工具是一个基于正则的 HTML 压缩器,大约三十行 JavaScript。它把 <pre>、<textarea>、<script> 与 <style> 的内容 token 化为占位符,以免后续变换破坏它们;去掉  注释(用一个 lookahead 保留 <!--[if 这类条件注释);折叠标签之间的空白;在属性值只包含安全字符([a-zA-Z0-9_-]+)时保守地去掉属性引号;并简化一份硬编码的 15 个布尔属性的清单。本工具不做、而生产级压缩器会做的事:它不删除可选的结束标签(许多上下文中的 </li>、</td>),那需要理解 HTML5 的内容模型;除明确列出的之外,它不删除带默认值的冗余属性(input 上的 type="text"、script 上的 type="text/javascript");它不压缩内联的 <style> 或 <script> 内容(请使用专门的 CSS Minifier 与 JS Minifier 工具,然后再贴回);它不按字母序排序属性(那能略微提升 gzip 压缩率);它不处理 SVG 专用的压缩规则。如果你的项目有构建管线,请用 html-minifier-terser、minify-html 或 swc;对于一次性 HTML,本工具消除的是那点摩擦。

隐私:为什么这里"纯浏览器"很重要

服务器端 HTML 压缩需要上传源代码。对已发布的网页这是无害的(HTML 已经公开了)。但对于内部管理工具的模板、未发布的产品页、A/B 测试变体 HTML,或带个性化内容的邮件模板,服务器端压缩就是泄漏。本工具通过 JavaScript 在你的浏览器里完成全部变换,什么都不会过网络。点击"压缩"时打开 DevTools 的 Network 标签即可核验,或者在加载后让页面离线(飞行模式),工具仍然能用。

常见问题

我的 HTML 会变小多少?

对带注释和缩进、由人手动格式化的 HTML,可期待 10-30% 的原始字节缩减;空白慷慨、HTML 注释丰富的 SSR 模板可达 30-50%。在 CDN 边缘做完 Brotli 压缩之后,压缩带来的额外节省更克制,通常 5-15%,但不是零,在规模上还是会累加。生产级压缩器(html-minifier-terser、minify-html)能拿到稍好的数字,因为它们理解 HTML5 的内容模型,可以删除可选的结束标签。

压缩会破坏我的 HTML 吗?

对那些标签之间空白在结构上不重要的 HTML,不会。风险场景包括:行内元素之间空白会被渲染的散文段落(把 <em> 标签之间的空格折掉可能让单词粘在一起);在非 <pre> 元素上设了 white-space: pre 的 CSS 规则(压缩器看不到 CSS);包含 IE 关键专用样式的 IE 条件注释;框架水合标记(Vue、Angular、React 服务端渲染提示)。在部署前测试压缩输出,对常见的现代 HTML 这很少成为问题。

它会压缩内联的 CSS 或 JavaScript 吗?

不会。内联的 <style> 与 <script> 内容原样保留,压缩器不会尝试解读 CSS 或 JS 语法。要压缩内联资源,可分别在 <style> 与 <script> 内容上使用专门的 CSS Minifier 与 JavaScript Minifier 工具,然后再贴回 HTML。在自动化管线里,html-minifier-terser 可选地在内联块上调用 clean-css 与 Terser(设置 minifyCSS 与 minifyJS 选项)。

邮件 HTML 适合用这个吗?

大概不适合。邮件客户端的解析器五花八门,Outlook 2007-2019 使用 Microsoft Word 的 HTML 渲染,Gmail 会去掉超过尺寸阈值的 <style> 标签,各种 webmail 客户端会静默丢弃属性。Web HTML 的压缩规则并非都适用于邮件。邮件模板请使用 MJML 或 Foundation for Emails 这类邮件专用工具,在编译时处理邮件 HTML 的怪癖。在 Mailchimp 模板上跑一个通用的 Web HTML 压缩器,八成会在 Outlook 里把它弄坏。

我已经有构建管线了,还要用这个吗?

大概不必,你的打包器在替你做这件事。Hugo 的 --minify 标志(自 v0.47,2018 年 8 月)、Eleventy 的 html-minifier-terser 插件、Next.js 的 SWC、Astro 3.0 内置的 HTML 压缩,它们全都自动完成压缩。本工具是给那些你的构建管线没覆盖到的场景用的:手写 HTML 页面、主题之外的 WordPress 页面模板、一次性片段,或者为之搭建构建管线比写片段本身还费时的快速实验。

我的 HTML 会被上传吗?

不会。压缩器是在你浏览器里运行的 JavaScript。你粘贴进去的 HTML 永远不会过网络,点击"压缩"时打开 DevTools 的 Network 标签即可核验,或者在加载完后让页面离线、确认工具仍然能用。内部管理工具模板、未发布的产品页、A/B 测试变体,以及带个性化内容的邮件模板,都留在你的设备上。