本文介绍在 react 前端环境中（非服务端）对 html 字符串进行轻量级、安全的客户端压缩方案，兼容邮件模板等场景，支持空格折叠、注释移除、css/js 内联压缩等核心功能。

在 React 应用中实现 HTML 字符串的客户端压缩，关键在于引入一个可在浏览器环境运行的精简版 html-minifier。虽然 html-minifier-terser 本身是为 Node.js 设计的（依赖 fs、path 等服务端模块），但其官方维护了一个浏览器兼容的 UMD 构建版本 —— html-minifier-terser/browser，已预编译为纯前端可用的 <script> 可加载模块。</script>

✅ 推荐方案：使用 html-minifier-terser/browser

1. 安装（可选，推荐 CDN 按需加载）
   由于该库体积较小（gzip 后约 35 KB），且多数 React 项目无需服务端 SSR 压缩逻辑，建议通过动态 import() 或 CDN 异步加载，避免增大首屏包体积：

   // utils/htmlMinify.ts
   export const minifyHtml = async (html: string, options = {}) => {
     // 动态加载浏览器版 html-minifier-terser（CDN）
     const { minify } = await import(
       'https://cdn.jsdelivr.net/npm/html-minifier-terser@7.2.0/browser/index.js'
     );
     return minify(html, {
       collapseWhitespace: true,
       conservativeCollapse: true,
       trimCustomFragments: true,
       removeRedundantAttributes: true,
       removeEmptyAttributes: true,
       removeComments: true,
       minifyCSS: true,
       minifyJS: true,
       collapseBooleanAttributes: true,
       ...options,
     });
   };

2. 在组件中使用（配合 useEffect 或事件触发）
   例如，在编辑邮件 HTML 模板后一键压缩：

   import React, { useState, useEffect } from 'react';
   import { minifyHtml } from './utils/htmlMinify';
   
   const EmailEditor = () => {
     const [rawHtml, setRawHtml] = useState('<div>  <p>Hello <!-- comment -->World</p><div class="aritcle_card flexRow">
                                                           <div class="artcardd flexRow">
                                                                   <a class="aritcle_card_img" href="/xiazai/skill12671" title="JSON Toolkit"><img
                                                                                   src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="JSON Toolkit" ></a>
                                                                   <div class="aritcle_card_info flexColumn">
                                                                           <a href="/xiazai/skill12671" title="JSON Toolkit">JSON Toolkit</a>
                                                                           <p>JSON文件多功能工具。支持格式化、验证、压缩、键排序及点记法路径查询。零依赖。</p>
                                                                   </div>
                                                                   <a href="/xiazai/skill12671" title="JSON Toolkit" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                           </div>
                                                   </div> </div>');
     const [minifiedHtml, setMinifiedHtml] = useState('');
   
     useEffect(() => {
       const compress = async () => {
         try {
           const result = await minifyHtml(rawHtml);
           setMinifiedHtml(result);
         } catch (err) {
           console.warn('HTML minification failed:', err);
           setMinifiedHtml(rawHtml); // fallback
         }
       };
       if (rawHtml.trim()) compress();
     }, [rawHtml]);
   
     return (
       <div>
         <textarea value={rawHtml} onChange={(e) => setRawHtml(e.target.value)} />
         <pre class="brush:php;toolbar:false;" style={{ background: '#f5f5f5', padding: '12px', overflowX: 'auto' }}>
           {minifiedHtml}
         

   ); }; export default EmailEditor;

⚠️ 注意事项

• 不适用于 SSR 渲染阶段：html-minifier-terser/browser 仅在浏览器环境运行，若在 Next.js App Router 的服务端组件中调用会报错（如 window is not defined）。请确保仅在客户端生命周期（如 useEffect、事件处理器或 useClientEffect）中使用。
• 内联脚本/CSS 安全性：minifyJS 和 minifyCSS 选项会实际执行解析与压缩逻辑，不处理外部资源，但会对 <script> 和 <style> 标签内的代码进行压缩。确保输入 HTML 不含恶意内联代码（压缩本身不提供 XSS 防护）。</script>
• 性能考量：对超长 HTML（>1MB）压缩可能阻塞主线程。如需处理大文档，建议搭配 setTimeout 或 requestIdleCallback 实现异步节流。
• 替代轻量方案（极简需求）：若仅需基础空格/注释清理，可手写正则（但不推荐用于生产邮件模板）：

  const quickMinify = (s: string) =>
    s.replace(/<!--[\s\S]*?-->/g, '') // 移除注释
      .replace(/\s+/g, ' ')            // 多空格转单空格
      .trim();

综上，html-minifier-terser/browser 是目前最成熟、配置兼容性强、且与服务端 html-minifier-terser 行为一致的客户端解决方案。合理封装 + 按需加载，即可在 React 中安全、高效地完成 HTML 字符串压缩任务。