rehype preset to minify HTML.
<!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 & 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><!doctypehtml><html lang=en><meta charset=utf8><script src=index.js></script><link href=index.css rel=stylesheet><title>Foo & 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>This package is ESM only:
Node 12+ is needed to use it and it must be importeded instead of requiredd.
npm:
npm install rehype-preset-minifyThis package exports no identifiers.
The default export is rehypePresetMinify
The following plugins are included in the preset. They are mostly harmless (disclaimer: rehype-minify is quite young).
rehype-minify-attribute-whitespacerehype-minify-css-stylerehype-minify-enumerated-attributerehype-minify-event-handlerrehype-minify-javascript-scriptrehype-minify-javascript-urlrehype-minify-json-scriptrehype-minify-languagerehype-minify-media-attributerehype-minify-meta-colorrehype-minify-meta-contentrehype-minify-style-attributerehype-minify-whitespacerehype-normalize-attribute-value-caserehype-remove-commentsrehype-remove-duplicate-attribute-valuesrehype-remove-empty-attributerehype-remove-external-script-contentrehype-remove-meta-http-equivrehype-remove-script-type-javascriptrehype-remove-style-type-cssrehype-sort-attribute-valuesrehype-sort-attributes
The following plugins are not included because they are potentially dangerous, can make sites slower in some cases, or need extra configuration. Read their readmes carefully before using!
rehype-concat-css-stylerehype-concat-javascriptrehype-css-to-toprehype-javascript-to-bottomrehype-minify-doctyperehype-minify-urlrehype-prevent-favicon-request
Also: pass allowDangerousCharacters to rehype-stringify if you
trust your content.
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 crashes on stackoverflow.
| name | raw | gzip | ||||
|---|---|---|---|---|---|---|
| original | rehype-minify | html-minifier | original | rehype-minify | html-minifier | |
| amazon | 446.35KB | 7.74% | 8.83% | 114.03KB | 6.38% | 6.75% |
| bbc | 293.18KB | 3.65% | 3.45% | 36.3KB | 1.72% | 1.71% |
| bootstrap | 35.18KB | 21.66% | 22.08% | 8.4KB | 4.85% | 5.08% |
| compat table | 7.6MB | 16.67% | 16.97% | 241.77KB | 3.69% | 5.51% |
| ecmascript | 6.58MB | 9.55% | 10.09% | 790.72KB | 5.26% | 5.43% |
| eloquent | 80.09KB | 6.43% | 6.45% | 19.13KB | 1.24% | 1.26% |
| github | 184.92KB | 16.86% | 16.18% | 34.39KB | 7.00% | 7.20% |
| 13.01KB | 7.60% | 7.56% | 5.75KB | 4.56% | 4.26% | |
| guardian | 929.59KB | 3.76% | 4.20% | 128.07KB | 2.78% | 2.93% |
| html | 11.17MB | 3.28% | 3.31% | 1.66MB | 5.41% | 5.49% |
| 84.47KB | 38.03% | 37.97% | 10.54KB | 13.70% | 13.43% | |
| microsoft | 197.87KB | 8.82% | 21.02% | 40.16KB | 4.44% | 6.85% |
| nbc | 1.48MB | 5.65% | 5.79% | 214.5KB | 1.88% | 1.77% |
| npm | 23.12KB | 8.31% | 7.89% | 7.13KB | 4.36% | 3.99% |
| nytimes | 1.17MB | 8.90% | 8.59% | 123.83KB | 4.42% | 4.12% |
| rocketchat | 186.83KB | 12.15% | 💥 | 28.81KB | 7.10% | 💥 |
| slack | 119.24KB | 4.81% | 3.94% | 35.76KB | 1.95% | 1.55% |
| stackoverflow | 117.91KB | 31.43% | 33.03% | 22.1KB | 9.95% | 10.84% |
| 42.86KB | 9.40% | 9.11% | 13.33KB | 3.70% | 3.45% | |
| vice | 182.35KB | 5.29% | 4.91% | 40.65KB | 4.89% | 4.70% |
| wikipedia | 658.95KB | 6.06% | 6.81% | 126.5KB | 1.89% | 2.12% |
| total | 31.52MB | 29.07MB | 29.02MB | 3.65MB | 3.48MB | 3.48MB |
Huge differences in results are suspicious and may point to bugs.
💥 — Crash.
Use of rehype-preset-minify is safe by default, if the tree is already safe.
Other plugins can open you up to a cross-site scripting (XSS) attack.
Use rehype-sanitize to make the tree safe.
To further optimize the result disregarding security, use the extra plugins
above and pass allowDangerousCharacters to rehype-stringify.
rehype-format— Format HTML
See contributing.md in rehypejs/.github for ways
to get started.
See support.md for ways to get help.
This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.
