超长展示页HTML压缩必须使用html-minifier-terser并配置4个关键参数：--collapse-whitespace（保留pre/textarea/code内空格）、--preserve-quotes（防class解析失败）、--ignore-custom-comments（跳过CMS注释）、--minify-css true --minify-js true（同步压缩内联资源），且Webpack中需启用conservativeCollapse和preventAttributesEscaping以避免渲染异常。
超长展示页（如产品详情页、长图文页、营销落地页）的HTML体积往往远超普通页面，手动清理几乎不可行，必须依赖工具链+针对性配置，否则压缩后容易破坏结构或触发渲染异常。
html-minifier-terser 命令行压缩时必设的 4 个关键参数
直接用默认参数跑 html-minifier-terser 极易出问题：比如把 <pre> 里的换行全删掉、误删 <textarea> 的空格、或把 SVG 内联代码压坏。以下参数组合是超长页安全压缩的底线：
-
--collapse-whitespace：只合并连续空白，不删<pre>、<textarea>、<code>内部空格 -
--preserve-quotes：避免引号被删导致 class 名含空格时解析失败（如class=header main→ 实际应为class="header main"） -
--ignore-custom-comments：跳过以<!--#或<!--!>开头的注释（常用于 CMS 模板占位符） -
--minify-css true --minify-js true：内联的 CSS/JS 必须同步压缩，否则压缩后体积反而更大（未压缩的内联脚本可能占几 KB）
Webpack 构建中 html-webpack-plugin 的压缩陷阱
很多项目在 html-webpack-plugin 里开 minify: true，结果上线后页面错位或交互失效——这是因为插件默认调用的是旧版 html-minifier，对 HTML5 语义标签和现代属性支持弱。
正确做法是显式指定 html-minifier-terser 并传入定制配置：
立即学习“前端免费学习笔记（深入）”；
new HtmlWebpackPlugin({
template: 'src/index.html',
minify: {
collapseWhitespace: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
useShortDoctype: true,
// 关键：禁用可能破坏结构的选项
conservativeCollapse: true, // 防止相邻标签间空格被误删
preventAttributesEscaping: true, // 防止 data-* 属性值被转义
}
})特别注意：conservativeCollapse 在超长页中必须开启，否则 <div><p>内容</p></div> 可能被压成 <div><p>内容</p></div>（看似一样，但某些 CSS 选择器会因空格缺失失效）。
压缩后 DOM 渲染异常的三个高频原因
超长页压缩后最常出现“样式错乱”“JS 找不到元素”“图片不显示”，往往不是工具问题，而是压缩暴露了原有代码的脆弱性：
-
document.getElementById('xxx')失败 → 原 HTML 中 ID 值带空格或特殊字符（如id="section 1"），压缩后变成id=section 1，浏览器只认前半段；修复：确保所有 ID 符合[a-zA-Z][a-zA-Z0-9_\-]*规则 - Flex/Grid 布局塌陷 → 压缩删掉了父容器里用于“撑开高度”的空
<div></div>，而 CSS 依赖它占位；修复：改用::before伪元素或min-height - 懒加载图片不触发 →
loading="lazy"被压缩工具当成冗余属性删掉（老版本html-minifier会这样）；修复：加keepClosingSlash: true并确认工具版本 ≥ 9.0.0
Gzip 之后再压缩 HTML 还有意义吗？
有意义，而且必要。Gzip 对重复字符串高效，但对单次出现的冗余空格、注释无效。实测一个 800KB 的超长展示页：
- 原始 HTML：800 KB
- 仅 Gzip：320 KB
- 先
html-minifier-terser再 Gzip：260 KB（再省 60 KB，相当于多扛 10% 并发）
关键点：压缩顺序必须是「HTML 工具压缩 → 构建产物写入 dist → 服务器启用 Gzip」。如果只靠 Nginx 的 Gzip，那些注释、空格、重复 class 名依然存在，白白浪费带宽。
