How to compress HTML strings client-side in real-time in a React app

This article introduces a lightweight and secure client-side compression solution for HTML strings in the React front-end environment (non-server). It is compatible with email templates and other scenarios, and supports core functions such as space folding, comment removal, and CSS/JS inline compression.

The key to implementing client-side compression of HTML strings in React applications is to introduce a streamlined version of html-minifier that can run in the browser environment. Although html-minifier-terser itself is designed for Node.js (relying on server-side modules such as fs and path), it officially maintains a browser-compatible UMD build version - html-minifier-terser/browser , which has been precompiled into a <script> loadable module available for pure front-end use.</script>

✅ Recommended solution: use html-minifier-terser/browser

1. Installation (optional, CDN loading on demand is recommended)
   Since the library is small in size (about 35 KB after gzip), and most React projects do not require server-side SSR compression logic, it is recommended to load asynchronously through dynamic import() or CDN to avoid increasing the size of the first screen package:

    //utils/htmlMinify.ts
   export const minifyHtml = async (html: string, options = {}) => {
     // Dynamically load the browser version of 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. Used in components (with useEffect or event triggering)
   For example, one-click compression after editing the email HTML template:

    import React, { useState, useEffect } from 'react';
   import { minifyHtml } from './utils/htmlMinify';
   
   const EmailEditor = () => {
     const [rawHtml, setRawHtml] = useState('<div> <p>Hello <!-- comment -->World</p> </div>');
     const [minifiedHtml, setMinifiedHtml] = useState('');
   
     useEffect(() =&gt; {
       const compress = async () =&gt; {
         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)} /&gt;
         <pre style="{{" background: padding: overflowx:>
           {minifiedHtml}