HTML压缩应使用html-minifier-terser等工具实现构建时压缩，关键配置包括collapseWhitespace和removeComments；Webpack中通过html-webpack-plugin配置；服务端需启用gzip或brotli传输压缩，效果远超文件级压缩。
HTML 代码压缩不是靠手动删空格——那样既容易出错，又无法处理注释、冗余属性、未闭合标签等真正拖慢加载的问题。真正有效的压缩必须交由工具完成，且需区分「构建时压缩」和「服务端实时压缩」两种场景。
用 html-minifier-terser 在构建流程中压缩 HTML
这是目前最主流、维护活跃的 Node.js 方案，支持现代 HTML5 语法，比老版 html-minifier 更可靠。
- 安装：
npm install --save-dev html-minifier-terser
- 基础调用示例（注意
collapseWhitespace和removeComments是关键开关）：const minify = require('html-minifier-terser').minify; const result = minify(htmlString, { collapseWhitespace: true, removeComments: true, removeRedundantAttributes: true, useShortDoctype: true, removeEmptyAttributes: true, minifyCSS: true, minifyJS: true }); - 常见陷阱：
minifyJS: true会尝试压缩内联，若含模板字符串或 ES2020+ 语法，可能报错；建议只对已转译的 JS 启用，或改用minifyJS: { compress: false }关闭 JS 压缩 - 不推荐在开发环境启用
removeScriptTypeAttributes或removeStyleLinkTypeAttributes，因为部分旧版 IE 或测试工具依赖这些属性存在
Webpack 中集成 HTML 压缩（配合 html-webpack-plugin）
如果你用 Webpack 打包，压缩应作为插件输出环节的一部分，而非单独处理文件。
-
html-webpack-pluginv5+ 内置了minify选项，但默认关闭；启用时需显式传入配置对象： new HtmlWebpackPlugin({ template: './src/index.html', minify: { collapseWhitespace: true, removeComments: true, removeRedundantAttributes: true, removeScriptTypeAttributes: true, removeStyleLinkTypeAttributes: true, useShortDoctype: true } });- 注意：Webpack 5 默认使用
terser-webpack-plugin压缩 JS，所以无需在 HTML 插件里重复开启minifyJS，否则可能引发双重压缩错误 - 如果
index.html含 EJS 或 Nunjucks 模板语法，确保minify不误删变量占位符（如），此时应禁用removeComments或改用ignoreCustomComments
Nginx 开启 gzip 或 brotli 是更关键的一步
光压缩 HTML 文件本身作用有限——未启用服务端压缩时，浏览器收到的仍是原始体积；而开启后，传输体积可再降 60%～80%，且对用户完全透明。
立即学习“前端免费学习笔记（深入）”；
- 确认 Nginx 已编译支持
brotli（比 gzip 更高效），并在配置中启用：gzip on; gzip_types text/plain text/css text/javascript application/javascript application/json; brotli on; brotli_types text/plain text/css text/javascript application/javascript application/json;
- 不要对
image/*、font/*等本就压缩过的资源再开 gzip，反而增加 CPU 开销 - 本地开发用
serve或http-server时，默认不带压缩，别误以为“没压缩成功”——那是服务端没配，不是 HTML 文件问题
真正影响首屏速度的，从来不是少几个空格，而是是否启用传输层压缩、是否拆分关键 CSS、是否延迟非关键 JS。HTML 压缩只是链条上最表层的一环，工具选错或参数激进，反而会导致页面渲染异常或模板失效。
