rehypejs/rehype-minify

plugins to minify HTML

101

stars

252

commits

JavaScript

primary language

Feb 19, 2025

updated

unifiedjs.com

html

mangle

minify

optimize

rehype

rehype-plugin

rehype-preset

Browse cluster: Rehype HTML Processing Plugins →

README

rehype plugins to minify HTML.

What is this?
When should I use this?
Presets
Plugins
Benchmark
Security
Related
Contribute
License

What is this?

This GitHub repository is a monorepo that contains a couple utilities, ±30 plugins, and a preset with good and safe default, to minify HTML:

In

<!doctype html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="content-language" content="en-US">
    <script src="index.js" type="text/javascript" language="javascript">
      alert(true);
    </script>
    <link rel="stylesheet" href="index.css" type="text/css">
    <title>Foo  &amp;  bar</title>
  </head>
  <body>
    <h1 class="foo foo">bar  bar</h1>
    <p id="alfred" id="alfred">  <strong>foo</strong> <em>bar</em> </p>
    <button type="BUTTON" onclick="javascript:return false">Alpha</button>
  </body>
</html>

Out

<!doctypehtml><html lang=en><meta charset=utf8><script src=index.js></script><link href=index.css rel=stylesheet><title>Foo &#38 bar</title><h1 class=foo>bar bar</h1><p id=alfred><strong>foo</strong> <em>bar</em></p><button onclick=return!1 type=button>Alpha</button>

When should I use this?

This project is useful when you want to improve the size of HTML documents. It’s particularly useful when you’re already using rehype (and remark?) to process HTML.

Presets

Presets are combinations of plugins. One preset is maintained here:

rehype-preset-minify — preset to minify and mangle HTML

Plugins

The following plugins maintained here are included in the above preset.

The following plugins are not included in the preset as they are potentially dangerous, can make sites slower in certain cases, or need extra configuration. Read their readmes before using:

Also: pass allowDangerousCharacters to rehype-stringify if you trust your content.

Benchmark

Here’s a benchmark comparing the results from html-minifier and rehype-minify. To summarize: differences are negligible, in fact, minifying HTML doesn’t matter much. What does matter is using good compressions, such as gzip. Note: html-minifier sometimes crashes, such as on amazon.

name	raw			gzip
name	original	rehype-minify	html-minifier	original	rehype-minify	html-minifier
amazon	567.85KB	5.71%	💥	128.65KB	5.07%	💥
bbc	531.54KB	4.70%	4.58%	58.09KB	1.85%	1.96%
bootstrap	33.96KB	22.36%	22.82%	8.12KB	5.17%	5.36%
compat-table	8.67MB	16.34%	16.74%	275.06KB	8.26%	10.06%
ecmascript	6.62MB	10.86%	11.56%	789.66KB	6.39%	6.60%
eloquent	80.08KB	6.43%	6.45%	19.13KB	1.25%	1.26%
github	233.14KB	13.39%	14.51%	38.86KB	7.48%	7.91%
google	253.98KB	3.13%	3.20%	80.56KB	3.64%	3.63%
guardian	765.54KB	6.75%	8.71%	112.21KB	3.96%	4.38%
html	12.72MB	3.15%	3.19%	1.85MB	5.49%	5.58%
linkedin	120.77KB	32.29%	32.34%	14.4KB	13.99%	13.91%
microsoft	174.26KB	22.44%	34.12%	26.45KB	12.96%	15.45%
nbc	1.64MB	5.94%	6.28%	221.08KB	1.86%	1.92%
npm	27.98KB	3.03%	2.61%	8.28KB	2.22%	2.01%
nytimes	822.38KB	11.80%	11.80%	137.47KB	2.71%	2.72%
slack	205.45KB	4.76%	4.55%	49.63KB	2.06%	1.98%
stackoverflow	169.8KB	18.64%	19.10%	45.4KB	6.42%	6.67%
vice	337.93KB	3.48%	3.22%	92.58KB	2.61%	2.52%
wikipedia	768.18KB	6.08%	6.76%	144KB	1.58%	1.77%
total	34.63MB	31.9MB	31.83MB	4.05MB	3.85MB	3.85MB

Huge differences in results are suspicious and may point to bugs.

💥 — Crash.

Security

Use of rehype-preset-minify is safe by default if the tree is already safe. As rehype works on HTML and improper use of HTML can open you up to a cross-site scripting (XSS) attack, use of rehype can also be unsafe. Use rehype-sanitize to make the tree safe.

To further optimize the result disregarding security, use the extra plugins listed above and pass allowDangerousCharacters to rehype-stringify.