rehype-minify:基于 rehype 的 HTML 压缩工具项目

plugins to minify HTML

文件	最后提交记录	最后更新时间
.github	Update Actions	1 年前
packages	rehype-minify-enumerated-attribute: 5.0.2	1 年前
script	Update dev-dependencies	1 年前
test	rehype-minify-doctype: remove The only doctype supported by rehype is the regular, `<!doctype html>`.	2 年前
.editorconfig	Initial commit	9 年前
.gitignore	Add declaration maps	1 年前
.mailmap	Add `.mailmap`	6 年前
.npmrc	Refactor build scripts	2 年前
.prettierignore	Update dev-dependencies	6 年前
changelog.md	Add `changelog.md`	7 年前
license	Remove license year	1 年前
logo.svg	Add improved docs Closes GH-43. Reviewed-by: Christian Murphy <christian.murphy.42@gmail.com>	4 年前
package.json	Update dev-dependencies	1 年前
readme.md	Update dev-dependencies	1 年前
tsconfig.json	Add declaration maps	1 年前

自动翻译

rehype 用于压缩 HTML 的插件。

这是什么？

本 GitHub 仓库是一个单体仓库，包含一些工具、约 30 个插件以及一个具有良好且安全默认值的预设，用于压缩 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  &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>

输出

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

何时应该使用此工具？

当您希望减小 HTML 文档的体积时，本项目非常有用。如果您已经在使用 rehype（或许还有 remark？）来处理 HTML，那么它的作用会更加显著。

预设

预设是多个插件的组合。这里维护着一个预设：

rehype-preset-minify — 用于压缩和混淆 HTML 的预设

插件

以下维护的插件已包含在上述预设中。

以下插件未包含在预设中，因为它们可能具有危险性，在某些情况下可能会降低网站速度，或者需要额外的配置。使用前请阅读它们的说明文档：

此外：如果您信任您的内容，可以向 rehype-stringify 传递 allowDangerousCharacters 参数。

性能基准测试

以下是 html-minifier 与 rehype-minify 的性能对比基准测试。总结而言：两者差异微乎其微，实际上，HTML 压缩的影响并不大。真正重要的是使用高效的压缩方式，例如 gzip。注意：html-minifier 在部分网站（如亚马逊）上偶尔会出现崩溃情况。

名称	原始大小			gzip 压缩后
名称	原始文件	rehype-minify	html-minifier	原始文件	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%
总计	34.63MB	31.9MB	31.83MB	4.05MB	3.85MB	3.85MB

结果中若出现巨大差异则需警惕，这可能意味着存在 bug。

💥 — 崩溃。

安全性

如果树结构本身已安全，默认情况下使用 rehype-preset-minify 是安全的。由于 rehype 处理 HTML，而不当使用 HTML 可能使您面临跨站脚本（XSS）攻击，因此 rehype 的使用也可能存在安全风险。请使用 rehype-sanitize 来确保树结构的安全。

若要在不考虑安全性的情况下进一步优化结果，请使用上面列出的额外插件，并向 rehype-stringify 传递 allowDangerousCharacters 参数。