html压缩需正确配置工具与参数，v5+ html-webpack-plugin默认关闭压缩且minify只接受对象；慎用collapsebooleanattributes等选项以防兼容性问题；应确保编码统一为utf-8并验证压缩后dom解析正确性。
HTML压缩不是删空格就能完事，关键在构建时用对工具、配对参数、避开运行时陷阱。
html-webpack-plugin 的 minify 为什么没生效
新版（v5+）默认关闭压缩，且 minify 不再接受 true 或 false，只认对象或 false。
- 常见错误：写
minify: true，结果 HTML 完全没变化 - 正确写法必须是显式对象，例如：
minify: { collapseWhitespace: true, removeComments: true } - v4 和 v5 配置不兼容：v4 支持
minify: true，但已停止维护，升级后务必改写 - 若模板含 EJS/Nunjucks（如
），removeComments: true可能误删占位符，建议加ignoreCustomComments: [/^%.*?%$/]或直接禁用
collapseBooleanAttributes 到底该不该开
它把 <input required="required"> 缩成 <input required>，省几个字节，但代价是兼容性风险。
- 微信内置浏览器、部分安卓 WebView、旧版 IE、某些 SSR 渲染器会把
required当字符串而非布尔属性，导致表单校验失效 - 现代纯前端 SPA（如 React/Vue 跑在 Chrome/Firefox）可开
- 含服务端渲染、需兼容微信或企业内网环境的，建议关
-
disabled、checked、readonly同理，不是单独开关能解决的
中文注释乱码或 /<script>/<style> 内容被压坏</script>
根本原因不是“压缩太狠”，而是编码链路断裂或语义误判。
-
removeComments: true+removeScriptTypeAttributes: true组合下，内部字符处理层可能误将 UTF-8 注释按 Latin-1 解码再转义 - 临时解法：关掉
removeComments，或用ignoreCustomComments: [/^.*$/]排除所有注释 -
<pre class="brush:php;toolbar:false;"></pre>、<script></script>、<style></style>内容的换行与空格是语义的一部分，collapseWhitespace: true会破坏它们 —— html-minifier-terser 默认已保留<pre class="brush:php;toolbar:false;"></pre>，但<script></script>里的模板字符串仍可能被minifyJS: true错误处理 - 长期建议：确保 Node.js 运行环境默认编码为 UTF-8（
process.env.NODE_OPTIONS = '--icu-data-dir=./node_modules/full-icu'），并避免在压缩前做非 UTF-8 字符串拼接
用 html-minifier-terser 还是 minify-html
两者定位不同：前者是 Node.js 生态主力，后者是 Rust 实现的高性能替代，但集成成本更高。
-
html-minifier-terser是当前 Webpack/Vite 等构建链路事实标准，支持现代 HTML5 语法、<template></template>、<slot></slot>，且与html-webpack-plugin深度协同 -
minify-html（Rust 版）速度快、压缩率略高，但 CLI 无开箱即用的模板语法保护机制，对含 EJS/Nunjucks 的 HTML 易误删变量；Node.js 包（@minify-html/node）也尚未成为主流构建插件标配 - 若项目用 Webpack 5+，优先走
html-webpack-plugin+html-minifier-terser对象配置；仅当构建耗时成为瓶颈且确认无模板语法干扰时，才考虑替换为minify-html
真正容易被忽略的，是压缩后的 HTML 是否仍能被服务端渲染器、爬虫、微信 JSBridge 正确解析 —— 不是体积最小就最好，而是「最小且不失控」。每次改 minify 配置，都得跑一遍表单提交、SVG 渲染、控制台报错检查，尤其要盯着微信调试器里 DOM 树是否和预期一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
