html 不支持混淆，所谓“html 混淆”实为误用术语；正确做法是使用 html-minifier-terser 安全压缩，仅删注释、空白及可选标签，不重命名、不改语义，且需人工验证关键属性与选择器。
HTML 文件根本不支持混淆，别被名字骗了
所谓“HTML 混淆”是误用术语。HTML 是浏览器必须逐字解析的结构化标记，id="user-panel"、class="btn-primary"、data-id="123" 这些属性值一旦被重命名或编码，JS 就找不到节点，Vue/React 挂载点失效，页面直接白屏。工具如 javascript-obfuscator 或在线“HTML 混淆器”强行替换标签名或属性值，属于危险操作，不是优化，是自毁。
html-minifier-terser 是唯一靠谱的 HTML 压缩方案
它只做安全删减：删注释、合并空白、移除可选闭合标签（谨慎）、压缩内联 <script></script> 和 <style></style>。不碰外部资源，不改语义，不重命名任何东西。
-
collapseWhitespace: true必须配合preserveLineBreaks: false（默认），否则<pre class="brush:php;toolbar:false;"></pre>里换行会被吃掉 -
removeComments: true会删掉<!--[if IE]>-->和构建注入的 license 注释，上线前得人工核对 -
removeOptionalTags: true在现代环境可用，但若项目仍需兼容 IE8 或旧爬虫，建议关掉 - 内联 JS/CSS 由
minifyJS和minifyCSS控制，外部<script src="..."></script>完全不处理
Webpack/Vite 中 HTML 压缩常因配置遗漏失效
很多人以为 html-webpack-plugin 默认压缩，其实它默认 minify: false。Vite 的 vite-plugin-html 同理，不显式传 minify 配置就等于没压。
- Webpack 5+ 必须引入
html-minifier-terser并写成对象形式：minify: { collapseWhitespace: true, removeComments: true }，不能只写minify: true - 若用了
mini-css-extract-plugin，且 CSS 被抽离为独立文件，minifyCSS: true实际不起作用——因为 HTML 里只剩<link>标签，没内联样式可压 - 服务端 Gzip/Brotli 开启后，HTML 压缩收益骤降：原始 HTML 压缩可能省 20KB，开了 Gzip 后往往只剩 1–3KB 收益，而 Gzip 本身更通用、更省构建机 CPU
上线前必须人工验证的三个地方
压缩本身不报错，但功能异常是 silent failure —— 页面能打开，按钮点不动，数据不渲染，排查极耗时间。
- 检查所有
id、class、name属性是否被截断（比如从data-user-config-json变成data-user-config-jso） - 确认
<template></template>、<script type="text/x-template"></script>等非标准但关键的块没被误删 - 动态插入的 HTML（如后端模板引擎注入、微前端子应用挂载点）是否仍匹配 JS 中硬编码的选择器，比如
document.querySelector('#app')
真正影响 HTML 质量的从来不是压缩率，而是你有没有把结构语义当回事。工具只是刀，握刀的手得知道往哪儿砍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
