Skip to content

rehypejs/rehype-minify

Repository files navigation

rehype-minify

Build Coverage Sponsors Backers Chat

rehype plugins to minify HTML.

Contents

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:

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
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.

Related

Contribute

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.

License

MIT © Titus Wormer