本文介绍如何在 react 应用中客户端压缩 html 字符串（如邮件模板），推荐使用轻量、纯 js 的 `html-minifier-terser` 浏览器版，无需服务端依赖，支持空格折叠、注释移除、css/js 内联压缩等关键选项。
在 React 项目中对 HTML 字符串进行客户端压缩（例如生成可嵌入邮件的精简 HTML），传统 Node.js 方案如 html-minifier-terser 默认不兼容浏览器环境——它依赖 fs、path 等 Node 核心模块，直接引入会触发构建错误。但好消息是：该库已官方支持浏览器端使用，只需通过其 UMD 构建版本即可在客户端安全运行。
✅ 正确接入方式（推荐）
-
安装兼容版（v7+ 已内置浏览器支持）：
npm install html-minifier-terser
-
在组件中按需加载并调用（避免 SSR 报错，推荐动态导入 + useEffect）：
import { useEffect, useState } from 'react';
const HtmlMinifier = () => {
const [minified, setMinified] = useStateHello
useEffect(() => { // 动态导入确保仅在客户端执行 import('html-minifier-terser').then(({ minify }) => { const result = minify(htmlString, { collapseWhitespace: true, conservativeCollapse: true, trimCustomFragments: true, removeRedundantAttributes: true, removeEmptyAttributes: true, removeComments: true, minifyCSS: true, minifyJS: true, collapseBooleanAttributes: true, // ⚠️ 注意：浏览器中禁用以下服务端专属选项 // removeScriptTypeAttributes: false, // 部分浏览器环境可能不支持 type 属性移除 // useShortDoctype: true, }); setMinified(result); }).catch(err => console.error('HTML minification failed:', err)); }, []);
return (
立即学习“前端免费学习笔记（深入）”；
原始 HTML：
{htmlString}压缩后：
{minified || '正在压缩...'}export default HtmlMinifier;
### ⚠️ 关键注意事项 - **禁止在 SSR/服务端渲染中使用**：`useEffect` 是必要保障，防止 Next.js/Gatsby 等框架构建时报错； - **部分选项受限**：如 `removeScriptTypeAttributes`、`useShortDoctype` 在浏览器中可能无效果或引发异常，建议显式关闭或测试验证； - **性能考量**：大体积 HTML（>100KB）压缩可能阻塞主线程，可结合 `requestIdleCallback` 或 Web Worker 进一步优化； - **替代方案参考**：若追求极致轻量（<5KB），可考虑 [`minify-html-literals`](https://github.com/azl397985856/minify-html-literals)（专为模板字面量设计），但功能较精简。 ### ✅ 总结 `html-minifier-terser` 是目前 React 客户端 HTML 压缩最成熟、配置最接近服务端的解决方案。通过动态导入 + `useEffect` 组合，既能规避 SSR 问题，又能复用你已有的服务端配置逻辑，实现前后端一致的 HTML 最小化策略。对于邮件模板、富文本导出、HTML 片段分享等场景，这一方案兼具可靠性与开发效率。
