html-minifier-terser命令行压缩最可控，需显式配置--collapse-whitespace、--remove-comments等选项，禁用--remove-optional-tags，对模板语法加--ignore-custom-comments，配合Gzip/Brotli传输压缩才完整。
html-minifier-terser 命令行压缩最可控
直接用 html-minifier-terser 处理单个或批量 HTML 文件，是开发阶段最稳妥的压缩方式。它不依赖构建流程，也不受编辑器插件限制，所有选项可显式控制，避免“点了压缩但不知道删了啥”的风险。
常见错误现象：用某些在线工具压缩后页面错位、JS 报错、CSS 选择器失效——往往是因为默认启用了过于激进的选项（比如 --remove-optional-tags 或 --collapse-inline-tag-whitespace），把本该保留的空白语义给干掉了。
- 基础安全压缩命令：
html-minifier-terser --collapse-whitespace --remove-comments --minify-css true --minify-js true input.html -o output.html - 若含内联
<style>或<script>，必须加--minify-css true和--minify-js true，否则只压缩 HTML 结构，内联资源仍臃肿 - 禁用
--remove-optional-tags：它会删掉</html></body>等闭合标签，部分旧版 CMS 或模板引擎解析异常 - 对含服务端模板语法（如
{{ variable }}）的文件，加--ignore-custom-comments /{{[\s\S]*?}}/避免误删变量占位符
VS Code 插件压缩适合快速预览，但别当生产用
像 Minify HTML 这类 VS Code 插件确实点一下就出结果，适合改完本地 HTML 后快速看体积变化。但它本质是调用浏览器 DOM 解析再序列化，不是真正的词法压缩，会漏掉注释、保留大量空格，且无法处理内联 JS/CSS。
使用场景有限：仅用于静态原型页、文档页、或临时演示页；一旦项目含动态内容、Webpack 构建、或需要 CI/CD 自动化，插件就完全不可靠。
立即学习“前端免费学习笔记（深入）”；
- 打开文件后按
Ctrl+Shift+P→ 输入Minify HTML→ 回车，即完成压缩 - 插件不会修改原始文件，而是生成新标签页，需手动保存 —— 容易覆盖错文件
- 不支持配置项，比如无法跳过
loading="lazy"属性精简、也无法保留特定注释 - 若 HTML 中有未闭合标签（如
<img src="a.jpg">少了斜杠），插件可能自动补全，导致和线上渲染不一致
Webpack 构建时压缩才是生产环境标配
用 html-webpack-plugin 配合 html-minifier-terser 选项，才能确保每次打包都稳定输出压缩版 HTML。这是唯一能和 CSS/JS 压缩、资源哈希、代码分割联动的方式。
容易踩的坑：很多人只配了 minify: true，结果发现压缩后页面白屏或样式丢失。根本原因是没传具体配置对象，导致插件内部 fallback 到极简模式，连 class 属性引号都没删。
- 必须写成对象形式：
minify: { collapseWhitespace: true, removeComments: true, minifyCSS: true, minifyJS: true } - 若用了
templateParameters注入数据，加ignoreCustomFragments: [/{{[^}]*?}}/]防止变量被当注释删掉 - 开启
removeRedundantAttributes可删掉重复的type="text/css"，但要确认没用到 IE 条件注释（已基本淘汰） - 不要启用
useShortDoctype：它把<!DOCTYPE html>缩成<!doctype html>，虽合法但部分老旧爬虫识别异常
Gzip/Brotli 是传输层必开的“第二道压缩”
光压缩 HTML 文件本身不够。即使你把 12KB 的 HTML 压到 4KB，如果服务器没开 Gzip，用户还是得下 12KB。而开启后，4KB 文件还能再压到 1.5KB 左右 —— 这步省掉，前面所有压缩努力打七折。
性能影响明显：实测未开启 Gzip 时，HTML 传输耗时平均多 80~120ms（在 3G 网络下）；Brotli 在中高版本 Chrome/Firefox 中比 Gzip 再小 15% 左右，但 Nginx 1.19+ 才原生支持。
- Nginx 配置示例：
gzip on; gzip_types text/html text/css application/javascript; - 务必检查响应头是否含
Content-Encoding: gzip或brotli，用curl -I https://yoursite.com/index.html最快验证 - Apache 用户注意：
mod_deflate默认不压缩 .html 文件，需显式添加AddOutputFilterByType DEFLATE text/html - Node.js（Express）用
compression()中间件时，level: 6是平衡速度与压缩率的合理值，别盲目设 11
<script>console.log( "hello" );</script> 里的空格和换行全留着 —— 它们照样占带宽。必须确保压缩工具明确启用了 minify-js 和 minify-css 选项，而不是只动 HTML 标签结构。 
