html压缩必须跳过、、、标签内容，否则破坏缩进与功能；webpack中html-webpack-plugin v5+需显式配置minify对象而非布尔值；兼容旧ie需保留属性引号；collapsebooleanattributes慎开；中文注释乱码需确保utf-8编码并谨慎处理removecomments。
HTML 压缩到底要不要动 <pre class="brush:php;toolbar:false;"></pre> 和 <textarea></textarea> 里的内容
要，但必须跳过。直接删换行或空格会破坏用户可读性甚至功能——比如代码块缩进错乱、表单预填内容变形。
实操建议：
- 用正则或解析器识别
<pre class="brush:php;toolbar:false;"></pre>、<textarea></textarea>、<script></script>、<style></style>标签范围，先提取再压缩主体，最后原样插回 - 别信“一键压缩”工具默认行为，检查它是否保留这些标签内空白；
html-minifier-terser默认就保留<pre class="brush:php;toolbar:false;"></pre>内容，但需显式设preserveLineBreaks: true - 若手动写正则（不推荐），
/<pre class="brush:php;toolbar:false;">]*>[\s\S]*?/gi</pre>这类模式容易漏掉嵌套或自闭合变体，优先用 DOM 解析
Webpack 里配 html-webpack-plugin 压缩，为什么 minify 选项没生效
因为新版（v5+）默认关闭压缩，且 minify 不再是布尔值，而是对象或 false。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 配置了
minify: true，但输出 HTML 完全没变化 - 压缩后
<input type="text">变成<input type="text">，导致某些旧版 IE 解析失败
实操建议：
- 显式传入压缩配置对象，例如：
minify: { collapseWhitespace: true, removeComments: true, removeRedundantAttributes: true } - 如需兼容 IE，加
minify: { caseSensitive: true, conservativeCollapse: true }，避免属性值去引号 - 确认你装的是
html-webpack-pluginv5+，v4 的minify是布尔值，但已不维护
html-minifier-terser 的 collapseBooleanAttributes 开还是关
关。除非你确定所有目标环境都支持无值布尔属性写法。
使用场景：
- 开：纯现代浏览器环境，追求极致体积（省几个字节）
- 关：含微信内置浏览器、部分安卓 WebView、或服务端渲染需 SSR 兼容的场景
参数差异：
-
collapseBooleanAttributes: true把<input required="required">缩成<input required> - 但某些老解析器会把
required当字符串值而非布尔标志，导致校验逻辑失效 - 同理，
disabled、checked等也受此影响
Node.js 脚本调用压缩时，为什么中文注释被转成 你好
因为默认启用了 removeComments + removeScriptTypeAttributes 组合，而某些编码处理链路误将 UTF-8 注释当 Latin-1 处理再转义。
实操建议：
- 禁用注释移除：
removeComments: false，或改用removeComments: /<!--\s*build.*?-->/s只删构建标记 - 确保输入字符串是 UTF-8 编码，读文件时显式指定：
fs.readFileSync(path, 'utf8') - 如果必须删注释，用
ignoreCustomFragments: [ /<!--\[if [^\]]+?\]>/, /<!--\s*end\s*if\s*-->/ ]避免误伤中文
复杂点在于：压缩不是单纯删空格，它在字符流、DOM 结构、编码边界之间反复横跳。一个配置项改错，可能让页面白屏、表单失焦、或者 SEO 描述变成乱码。别图省事跳过测试环节。
