html格式化与压缩是开发与上线两个阶段的相反操作，必须按需切换；html-minifier-terser支持双向处理，能安全跳过pre/textarea/script/style内容，避免破坏结构。
HTML格式化和压缩不是“选一个用”，而是两个相反方向的操作，必须按需切换——开发时格式化便于阅读调试，上线前压缩减体积；混用或错用会导致代码不可维护或页面崩溃。
用 html-minifier-terser 做双向处理
这是目前最稳定、适配性最强的 CLI 工具，支持格式化（expand）和压缩（minify）两种模式，且能精准跳过 <pre class="brush:php;toolbar:false;"></pre>、<textarea></textarea>、<script></script>、<style></style> 内容，避免破坏缩进或语法。
实操建议：
- 安装：
npm install -g html-minifier-terser - 压缩命令：
html-minifier-terser --collapse-whitespace --remove-comments --minify-css --minify-js --input index.html --output index.min.html - 格式化命令（反向）：
html-minifier-terser --indent-size 2 --preserve-line-breaks --input index.min.html --output index.formatted.html - 注意：
--preserve-line-breaks必须显式开启，否则<pre class="brush:php;toolbar:false;"></pre>里的换行会被抹掉
Webpack 中 html-webpack-plugin 的压缩配置陷阱
v5+ 版本默认不压缩 HTML，且 minify 不再接受 true，设成布尔值等于没配。
常见错误现象：
- 输出 HTML 和源码一模一样，
minify: true完全无效 -
<input required>被压成<input required="">或直接丢掉属性，旧版 IE 渲染异常
实操建议：
- 必须传对象：
minify: { collapseWhitespace: true, removeComments: true, removeRedundantAttributes: true } - 兼容旧环境加
caseSensitive: true和conservativeCollapse: true，防止引号被删 - 禁用
collapseBooleanAttributes，除非你确认所有目标浏览器都支持disabled这种无值写法
手写正则压缩 HTML 的风险点
看似简单，但正则无法正确解析嵌套、自闭合、条件注释等结构，极易出错。比如 /<!--[\s\S]*?-->/g 会跨标签匹配，把 <!-- <div> --> 和后面真正的 --> 搞混。
实操建议：
- 绝对不要对含
<script></script>多次出现、含条件注释（
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
