在 react 应用中，可直接使用 `html-minifier-terser` 的浏览器兼容版本对 html 字符串进行客户端压缩，支持空格折叠、注释移除、css/js 内联压缩等关键能力，无需服务端依赖。
虽然 html-minifier-terser 原生为 Node.js 设计，但其已通过 Webpack/Browserify 构建出可在浏览器中运行的 UMD 版本（如 html-minifier-terser/browser），完全适用于 React 客户端场景——尤其适合动态生成并压缩邮件 HTML（如可视化邮件编辑器导出前的最终优化）。
✅ 推荐方案：直接引入浏览器版 html-minifier-terser
安装（确保使用支持浏览器环境的版本）：
npm install html-minifier-terser@^7.0.0 # v7+ 默认包含 browser build
在 React 组件中安全使用（配合 useEffect 或事件触发，避免 SSR 报错）：
import { useEffect, useState } from 'react';
// 注意：仅在客户端导入，防止服务端渲染失败
let htmlMinifier: typeof import('html-minifier-terser') | null = null;
const EmailPreview = ({ htmlContent }: { htmlContent: string }) => {
const [minified, setMinified] = useState<string>('');
useEffect(() => {
// 动态导入，规避 SSR 环境下 window 未定义问题
import('html-minifier-terser').then((mod) => {
htmlMinifier = mod;
const result = htmlMinifier.minify(htmlContent, {
collapseWhitespace: true,
conservativeCollapse: true,
trimCustomFragments: true,
removeRedundantAttributes: true,
removeEmptyAttributes: true,
removeComments: true,
minifyCSS: true,
minifyJS: true,
collapseBooleanAttributes: true,
// ⚠️ 注意：浏览器中不支持 `minifyURLs`（需额外 polyfill）和 `processScripts`
});
setMinified(result);
}).catch(console.error);
}, [htmlContent]);
return (
<div>
<h3>原始 HTML</h3>
<pre>{htmlContent.substring(0, 200)}...</pre>
<h3>压缩后 HTML（{minified.length} 字符）</h3>
<pre>{minified.substring(0, 200)}...</pre>
</div>
);
};
export default EmailPreview;? 注意事项与最佳实践：
- SSR 兼容性：务必使用 useEffect 或动态 import()，禁止在模块顶层 import，否则 Next.js/Gatsby 等框架会构建失败；
- 性能考量：HTML 压缩为同步 CPU 密集型操作，若内容超 100KB，建议添加防抖或 Web Worker 卸载主线程；
- 邮件特殊性：部分邮件客户端（如 Outlook）依赖冗余空格或换行，生产环境建议开启 conservativeCollapse: true 并保留 keepClosingSlash（避免破坏自闭合标签）；
- 替代轻量方案：若仅需基础压缩（无 CSS/JS 处理），可考虑纯正则简易实现（如 html-minifier-terser 的子集逻辑），但功能完整性远不如原库。
综上，html-minifier-terser 的浏览器版是当前 React 生态中最成熟、配置最贴近服务端行为的客户端 HTML 压缩方案，开箱即用且维护活跃，可放心集成至邮件构建、代码预览、模板导出等高频场景。
立即学习“前端免费学习笔记（深入）”；
