17370845950

新闻动态
如何在 React 应用中客户端实时压缩 HTML 字符串

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

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

✅ 推荐方案：使用 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('  
    Hello World
     ');
  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 (