HTML Minification with html-minifier-terser

Hint: Use fs.readdirSync(dir, { withFileTypes: true }) to recursively traverse folders. To handle JSON-LD safely without corrupting JSON formatting, ensure minifyJS: true does not blindly touch type="application/ld+json".

Solution: scripts/batch-minify.js

const fs = require('fs/promises');
const path = require('path');
const { minify } = require('html-minifier-terser');

const MINIFIER_CONFIG = {
  collapseWhitespace: true,
  conservativeCollapse: true,
  removeComments: true,
  removeRedundantAttributes: true,
  removeEmptyAttributes: true,
  removeScriptTypeAttributes: true,
  removeStyleLinkTypeAttributes: true,
  collapseBooleanAttributes: true,
  minifyJS: true,
  minifyCSS: true,
  decodeEntities: true,
  sortAttributes: true,
  sortClassName: true,
};

async function getAllHtmlFiles(dir) {
  let results = [];
  const entries = await fs.readdir(dir, { withFileTypes: true });

  for (const entry of entries) {
    const fullPath = path.join(dir, entry.name);
    if (entry.isDirectory()) {
      results = results.concat(await getAllHtmlFiles(fullPath));
    } else if (entry.isFile() && entry.name.endsWith('.html')) {
      results.push(fullPath);
    }
  }
  return results;
}

async function runBatchMinification(distDir) {
  console.log(`\n🚀 Scanning directory: ${distDir}`);
  const htmlFiles = await getAllHtmlFiles(distDir);

  if (htmlFiles.length === 0) {
    console.log("No HTML files found to process.");
    return;
  }

  let totalOriginalBytes = 0;
  let totalMinifiedBytes = 0;

  console.log(`Found ${htmlFiles.length} HTML files. Starting parallel optimization...\n`);

  await Promise.all(
    htmlFiles.map(async (filePath) => {
      const rawHtml = await fs.readFile(filePath, 'utf8');
      const origSize = Buffer.byteLength(rawHtml, 'utf8');

      const minifiedHtml = await minify(rawHtml, MINIFIER_CONFIG);
      const minSize = Buffer.byteLength(minifiedHtml, 'utf8');

      totalOriginalBytes += origSize;
      totalMinifiedBytes += minSize;

      await fs.writeFile(filePath, minifiedHtml, 'utf8');

      const fileSavings = ((1 - minSize / origSize) * 100).toFixed(1);
      console.log(`  ✓ ${path.relative(distDir, filePath)}: ${origSize}B → ${minSize}B (-${fileSavings}%)`);
    })
  );

  const totalSaved = totalOriginalBytes - totalMinifiedBytes;
  const overallPercentage = ((totalSaved / totalOriginalBytes) * 100).toFixed(2);

  console.log('\n========================================');
  console.log(`  BATCH MINIFICATION COMPLETE`);
  console.log(`  Total Files Processed: ${htmlFiles.length}`);
  console.log(`  Original Total Size  : ${(totalOriginalBytes / 1024).toFixed(2)} KB`);
  console.log(`  Minified Total Size  : ${(totalMinifiedBytes / 1024).toFixed(2)} KB`);
  console.log(`  Bandwidth Saved      : ${(totalSaved / 1024).toFixed(2)} KB (${overallPercentage}%)`);
  console.log('========================================\n');
}

runBatchMinification(path.resolve(__dirname, '../dist')).catch(console.error);

Why this works:

• getAllHtmlFiles() recursively crawls arbitrary nested subdirectory trees (/blog/posts/2026/index.html).
• Promise.all() executes minification concurrently across all files, taking full advantage of Node's libuv async threadpool.
• sortAttributes and sortClassName normalize attribute order across DOM nodes, which drastically improves Gzip/Brotli dictionary compression ratios.