应使用html-minifier-terser而非已停更的老版html-minifier，因其基于Terser引擎，能安全处理现代HTML5语法、模板字符串及ES2020+特性；Webpack中通过html-webpack-plugin配置时需谨慎启用removeScriptTypeAttributes和minifyJS等选项，避免破坏模块加载或调试信息。
直接用 html-minifier-terser，别碰老版 html-minifier —— 它已停止维护，对现代 HTML（比如含 <template>、<slot>、ES2020+ 内联脚本）支持不稳定，容易误删或报错。
Node.js 项目该装哪个包
本地开发或构建流程中压缩 HTML，必须装 html-minifier-terser：
npm install --save-dev html-minifier-terser- 它基于 Terser 引擎，能安全处理模板字符串、可选链、空值合并等语法
- 老版
html-minifier的minifyJS: true在遇到`${x}`或a?.b时会直接抛SyntaxError - 若项目用了 Vite 或 Webpack 5+，插件底层通常已默认桥接
html-minifier-terser，不用手动引入
Webpack 中 html-webpack-plugin 怎么配才不翻车
不是所有选项都适合开，尤其在含服务端渲染或模板语法的项目里：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
removeComments: true会删掉<!-- htmlmin:ignore -->外的所有注释，但 EJS/Nunjucks 占位符如<%= title %>不是注释，不会被删 —— 前提是没配ignoreCustomComments错误正则 -
removeScriptTypeAttributes: true会删<script type="module">里的type，导致模块加载失败；只建议对type="text/javascript"生效 -
minifyJS: true和 Webpack 自带的terser-webpack-plugin双重压缩 JS，可能把console.log残留变量名压缩掉，引发调试困难；生产环境建议设为{ compress: false }或干脆关掉 - 配置示例（安全可用）：
new HtmlWebpackPlugin({ minify: { collapseWhitespace: true, removeComments: true, removeRedundantAttributes: true, useShortDoctype: true, removeEmptyAttributes: true, removeScriptTypeAttributes: false, // 手动控制 minifyJS: { compress: false } }})
命令行批量压缩时怎么避开 SVG 和自定义标签
CLI 默认把 <svg> 当普通标签处理，可能错误移除 viewBox 空格或闭合斜杠，导致渲染异常：
立即学习“前端免费学习笔记（深入）”；
- 加
--custom-element-prefixes svg（v6+ 支持），让解析器识别 SVG 元素并跳过属性精简 - 若 HTML 含 Web Components 自定义标签（如
<my-button>），需加--custom-element-prefixes my-，否则removeRedundantAttributes可能删掉必需的属性 - 避免用
--remove-optional-tags压缩含<math>或<foreignObject>的页面，这些标签的闭合规则和 HTML 不同，强制移除</math>会破坏结构 - 测试命令：
html-minifier --collapse-whitespace --remove-comments --custom-element-prefixes svg,my- input.html -o output.html
最易被忽略的一点：HTML 压缩只是传输层优化的第一步，gzip 或 brotli 开启后，removeComments 带来的体积收益可能只剩 1–2%，而误删 data-* 属性或破坏内联 JSON 结构的风险却真实存在。上线前务必用 diff 对比压缩前后 DOM 快照，别只看文件大小。
