应使用html-minifier-terser而非老版html-minifier，因其基于terser引擎，能安全处理html5语法、模板字符串及es2020+特性；老版依赖过时解析器，遇、a?.b等会报错或误删。
直接用 html-minifier-terser，别碰老版 html-minifier——它已停更，遇到 <template></template>、<slot></slot>、内联模板字符串或可选链（a?.b）就会报 SyntaxError 或静默删错内容。
为什么老版 html-minifier 会出问题
老版本依赖过时的 JS 解析器，对现代 HTML5 结构和 ES2020+ 语法无感知。比如：
-
<script>console.log(`${x}`);</script>中的模板字面量会被误解析，触发minifyJS: true报错 -
<my-card title="foo"></my-card>这类自定义标签，会被当成普通标签处理，removeRedundantAttributes可能删掉必需的title -
<svg viewbox="0 0 100 100"></svg>的viewBox属性空格可能被错误折叠，导致渲染异常
html-minifier-terser 命令行压缩避坑配置
命令行批量处理时，必须显式声明自定义元素和 SVG 支持，否则压缩后页面可能白屏或样式错乱：
- 加
--custom-element-prefixes svg,my-，让解析器识别<svg></svg>和<my-xxx></my-xxx>不做属性精简 - 含服务端模板（如 EJS/Nunjucks）时，用
--ignore-custom-fragments //保护占位符 - 禁用
--remove-script-type-attributes：它会删掉<script type="module"></script>的type，导致模块加载失败 - 避免
--remove-optional-tags：在含<math></math>或<foreignobject></foreignobject>的页面中，会破坏 XML 语义
Webpack 中 html-webpack-plugin 安全压缩配置
插件默认桥接的是 html-minifier-terser，但开错选项等于埋雷：
-
removeComments: true是安全的，但若项目里用了<!-- htmlmin:ignore -->，要确保没配错ignoreCustomComments正则 -
minifyJS: { compress: false }比true更稳妥——Webpack 已用terser-webpack-plugin压缩过 JS，双重压缩可能抹掉console.log的调试变量名 -
collapseWhitespace: true在含<pre class="brush:php;toolbar:false;"></pre>或white-space: pre的页面中会破坏格式，此时应改用preserveLineBreaks: true并配合ignoreCustomFragments
压缩后最常被忽略的验证点
压缩不是“一压了事”，尤其在 SSR 或含动态模板的项目里：
- 检查
<script type="application/json"></script>内容是否被意外换行或引号移除（需设ignoreCustomFragments匹配该 script 类型） - 打开 DevTools → Elements 面板，确认
<svg></svg>标签的viewBox、xmlns等属性未被删减或格式化 - 运行
document.querySelectorAll('my-button')确认自定义元素仍能被正确选中——说明removeRedundantAttributes没误伤 - 如果用了
html-minifier-terser的minifyCSS: true，注意内联style中的 CSS 变量（如var(--color)）不会被解析，但值里若有注释或空格，会被压缩
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
