Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/rehypejs/rehype-minify

plugins to minify HTML
https://github.com/rehypejs/rehype-minify

html mangle minify optimize rehype rehype-plugin rehype-preset

Last synced: about 1 month ago
JSON representation

plugins to minify HTML

Awesome Lists containing this project

README

        

# ![rehype-minify][logo]

[![Build][build-badge]][build]
[![Coverage][coverage-badge]][coverage]
[![Sponsors][sponsors-badge]][collective]
[![Backers][backers-badge]][collective]
[![Chat][chat-badge]][chat]

**[rehype][]** plugins to minify HTML.

## Contents

* [What is this?](#what-is-this)
* [When should I use this?](#when-should-i-use-this)
* [Presets](#presets)
* [Plugins](#plugins)
* [Benchmark](#benchmark)
* [Security](#security)
* [Related](#related)
* [Contribute](#contribute)
* [License](#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

```html





alert(true);


Foo & bar


bar bar


foo bar


Alpha

```

###### Out

```html
Foo & bar

bar bar

foo bar

Alpha
```

## 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`][rehype-preset-minify]
— preset to minify and mangle HTML

## Plugins

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

* [`rehype-minify-attribute-whitespace`](./packages/rehype-minify-attribute-whitespace)
* [`rehype-minify-css-style`](./packages/rehype-minify-css-style)
* [`rehype-minify-enumerated-attribute`](./packages/rehype-minify-enumerated-attribute)
* [`rehype-minify-event-handler`](./packages/rehype-minify-event-handler)
* [`rehype-minify-javascript-script`](./packages/rehype-minify-javascript-script)
* [`rehype-minify-javascript-url`](./packages/rehype-minify-javascript-url)
* [`rehype-minify-json-script`](./packages/rehype-minify-json-script)
* [`rehype-minify-language`](./packages/rehype-minify-language)
* [`rehype-minify-media-attribute`](./packages/rehype-minify-media-attribute)
* [`rehype-minify-meta-color`](./packages/rehype-minify-meta-color)
* [`rehype-minify-meta-content`](./packages/rehype-minify-meta-content)
* [`rehype-minify-style-attribute`](./packages/rehype-minify-style-attribute)
* [`rehype-minify-whitespace`](./packages/rehype-minify-whitespace)
* [`rehype-normalize-attribute-value-case`](./packages/rehype-normalize-attribute-value-case)
* [`rehype-remove-comments`](./packages/rehype-remove-comments)
* [`rehype-remove-duplicate-attribute-values`](./packages/rehype-remove-duplicate-attribute-values)
* [`rehype-remove-empty-attribute`](./packages/rehype-remove-empty-attribute)
* [`rehype-remove-external-script-content`](./packages/rehype-remove-external-script-content)
* [`rehype-remove-meta-http-equiv`](./packages/rehype-remove-meta-http-equiv)
* [`rehype-remove-script-type-javascript`](./packages/rehype-remove-script-type-javascript)
* [`rehype-remove-style-type-css`](./packages/rehype-remove-style-type-css)
* [`rehype-sort-attribute-values`](./packages/rehype-sort-attribute-values)
* [`rehype-sort-attributes`](./packages/rehype-sort-attributes)

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:

* [`rehype-concat-css-style`](./packages/rehype-concat-css-style)
* [`rehype-concat-javascript`](./packages/rehype-concat-javascript)
* [`rehype-css-to-top`](./packages/rehype-css-to-top)
* [`rehype-javascript-to-bottom`](./packages/rehype-javascript-to-bottom)
* [`rehype-minify-url`](./packages/rehype-minify-url)
* [`rehype-prevent-favicon-request`](./packages/rehype-prevent-favicon-request)

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

## Benchmark

Here’s a benchmark comparing the results from [`html-minifier`][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)][xss] attack, use of rehype can also be unsafe.
Use [`rehype-sanitize`][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`][rehype-stringify].

## Related

* [`rehype-format`](https://github.com/rehypejs/rehype-format)
— format HTML

## Contribute

See [`contributing.md`][contributing] in [`rehypejs/.github`][health] for ways
to get started.
See [`support.md`][support] for ways to get help.

This project has a [code of conduct][coc].
By interacting with this repository, organization, or community you agree to
abide by its terms.

## License

[MIT][license] © [Titus Wormer][author]

[build-badge]: https://github.com/rehypejs/rehype-minify/workflows/main/badge.svg

[build]: https://github.com/rehypejs/rehype-minify/actions

[coverage-badge]: https://img.shields.io/codecov/c/github/rehypejs/rehype-minify.svg

[coverage]: https://codecov.io/github/rehypejs/rehype-minify

[sponsors-badge]: https://opencollective.com/unified/sponsors/badge.svg

[backers-badge]: https://opencollective.com/unified/backers/badge.svg

[collective]: https://opencollective.com/unified

[chat-badge]: https://img.shields.io/badge/chat-discussions-success.svg

[chat]: https://github.com/rehypejs/rehype/discussions

[health]: https://github.com/rehypejs/.github

[contributing]: https://github.com/rehypejs/.github/blob/main/contributing.md

[support]: https://github.com/rehypejs/.github/blob/main/support.md

[coc]: https://github.com/rehypejs/.github/blob/main/code-of-conduct.md

[license]: license

[author]: https://wooorm.com

[logo]: https://raw.githubusercontent.com/rehypejs/rehype-minify/6f0f096/logo.svg?sanitize=true

[rehype]: https://github.com/rehypejs/rehype

[xss]: https://en.wikipedia.org/wiki/Cross-site_scripting

[rehype-sanitize]: https://github.com/rehypejs/rehype-sanitize

[rehype-preset-minify]: https://github.com/rehypejs/rehype-minify/tree/main/packages/rehype-preset-minify

[rehype-stringify]: https://github.com/rehypejs/rehype/tree/main/packages/rehype-stringify#api

[html-minifier]: https://github.com/kangax/html-minifier