html-minifier 基于 JS 的 HTML 代码压缩工具

Question

HTMLMinifier 是一个高度可配置的、经过良好测试的、基于 JavaScript 的 HTML 压缩工具。参见相应的博客文章，了解它的工作原理、每个选项的描述、测试结果和结论。在线测试套件。还可以看到相应的 Ruby 包装器和NodeJS，Grunt 插件，Gulp 模块，Koa 中间件包装和 Express 中间件包装。对于类似 lint 的功能，请查看 HTMLLint。

缩小比较

与其他解决方案相比，HTMLMinifier 是如何与其他的解决方案相比较的呢？HTMLMinifier 第一个结果是在谷歌搜索 HTMLMinifier 和 htmlcompressor.com 和最小化？

Site	Original size (KB)	HTMLMinifier	minimize	Will Peavy	htmlcompressor.com
Google	46	43	46	48	46
HTMLMinifier	133	104	112	116	111
New York Times	214	145	163	162	152
BBC	237	194	229	235	222
Stack Overflow	248	195	204	212	201
Bootstrap CSS	272	260	269	229	269
Twitter	348	260	313	345	313
Amazon	405	349	390	403	n/a
Wikipedia	471	440	456	471	455
NBC	646	613	642	646	n/a
Eloquent Javascript	870	815	840	864	n/a
ES6 table	4580	3898	4333	n/a	n/a
ES6 draft	5720	5103	5253	n/a	n/a

可选参数

大多数选项在默认情况下是禁用的。

Option	Description	Default
caseSensitive	以区分大小写的方式处理属性，适用于定制的HTML标记	false
collapseBooleanAttributes	从布尔属性中省略属性值	false
collapseInlineTagWhitespace	Don't leave any spaces between display:inline;elements when collapsing. Must be used in conjunction with collapseWhitespace=true	false
collapseWhitespace	在显示之间不要留下任何空格，必须与折叠空间结合使用	false
conservativeCollapse	总是折叠到1个空间，永远不要完全删除它。必须与折叠空间结合使用	false
customAttrAssign	允许支持自定义属性分配表达式的正则表达式数组。 (e.g. '<div flex?="{{mode != cover}}"></div>')	[ ]
customAttrCollapse	Regex指定自定义属性以从(例如/ng-class/)删除新行。
customAttrSurround	允许支持自定义属性包围表达式的正则表达式数组(e.g. <input {{#if value}}checked="checked"{{/if}}>)	[ ]
customEventAttributes	允许为minifyJS支持自定义事件属性的正则表达式数组(例如，ng-click)	[ /^on[a-z]{3,}$/ ]
decodeEntities	尽可能使用直接的Unicode字符。	false
html5	根据HTML5规范分析输入。	true
ignoreCustomComments	当匹配时，允许忽略某些注释的正则表达式数组。	[ /^!/ ]
ignoreCustomFragments	当匹配时，允许忽略某些片段的正则表达式数组，例如 <?php ?>、{ {…} } 等等	[ /<%[\s\S]*?%>/, /<\?[\s\S]*?\?>/ ]
includeAutoGeneratedTags	插入由HTML解析器生成的标记。	true
keepClosingSlash	保留单例元素的末尾斜杠。	false
maxLineLength	指定最大行长度。压缩的输出将在有效的HTML分割点上被换行。
minifyCSS	缩小CSS样式元素和样式属性，usesclean-css	false (could betrue, Object,Function(text))
minifyJS	在脚本元素和事件属性中缩小 JavaScript，使用 UglifyJS	false (could betrue, Object,Function(text, inline))
minifyURLs	在各种属性中缩小 url，使用 relateurl	false (could beString, Object,Function(text))
preserveLineBreaks	当标记之间的空格包括换行符时，总是崩溃到1行中断(永远不要完全删除)。必须与折叠空间结合使用	false
preventAttributesEscaping	防止属性值的溢出	false
processConditionalComments	通过 minifier 处理条件评论的内容	false
processScripts	通过 minifier，例如 text/ng-template、text/x-handlebars-template 等，来处理脚本元素类型的字符串数组。	[ ]
quoteCharacter	用于属性值的引用类型 or
removeAttributeQuotes	在可能的情况下删除引号	false
removeComments	带 HTML 注释	false
removeEmptyAttributes	删除所有的属性，只有whitespace-only的值	false (could betrue,Function(attrName, tag))
removeEmptyElements	删除所有含有空内容的元素。	false
removeOptionalTags	删除可选的标记	false
removeRedundantAttributes	当值匹配默认值时删除属性。	false
removeScriptTypeAttributes	从脚本标签中删除type="text/javascript"。其他类型的属性值是完整的。	false
removeStyleLinkTypeAttributes	从 style 和 link 标签中删除 type="text/css"。其他类型的属性值是完整的。	false
removeTagWhitespace	尽可能在属性之间移除空间。注意，这可能导致无效的 HTML	false
sortAttributes	根据频率属性进行排序	false
sortClassName	按频率分类样式类。	false
trimCustomFragments	在ignoreCustomFragments周围调整空白区域	false
useShortDoctype	用short (HTML5) doctype替换doctype	false

排序属性 / 样式类

像 sortAttributes 和 sortClassName 这样的缩小器选项不会影响输出的纯文本大小。但是，它们形成了长时间重复的字符链，可以提高HTTP压缩中使用的 gzip 压缩率。

使用案例

忽略标记块

如果您有想要保留的标记块，可以将它们包装起来 <!-- htmlmin:ignore -->。

保留 SVG 标签

SVG 标签会被自动识别，并且当它们被缩小时，区分大小写和关闭斜杠都会被保留，而不管用于文件其余部分的缩小设置如何。

使用无效标记

HTMLMinifier 不能处理无效或部分标记块。这是因为它将标记解析为树结构，然后对其进行修改（删除指定要删除的任何内容，忽略指定要忽略的任何内容等），然后从该树中创建一个标记并返回它。

1. 输入标记（例如 <p id="">foo）
2. 标记的内部表示以树的形式（例如 { tag: "p", attr: "id", children: ["foo"] }）
3. 内部表示的转换（例如移除 id 属性）
4. 结果标记的输出（例如 <p>foo</p>）

HTMLMinifier 无法知道原始标记只是树的一半；它尽最大努力尝试将其解析为完整的树，并且在开始时丢失了有关树畸形或部分的信息。因此，它无法在输出时创建部分/畸形树。

安装说明

从 NPM 用作命令行应用程序：

npm install html-minifier -g

来自 NPM 用于程序化用途：

npm install html-minifier

来自 Git：

git clone git://github.com/kangax/html-minifier.git
cd html-minifier
npm link .

使用方法

请注意，默认情况下几乎所有选项都是禁用的。有关命令行用法，请参阅html-minifier --help可用选项列表。试验并找到最适合您和您的项目的方法。

示例命令行

html-minifier
  --collapse-whitespace
  --remove-comments
  --remove-optional-tags
  --remove-redundant-attributes
  --remove-script-type-attributes
  --remove-tag-whitespace
  --use-short-doctype
  --minify-css true
  --minify-js true

Node.js

var minify = require('html-minifier').minify;
var result = minify('<p title="blah" id="moo">foo</p>', {
  removeAttributeQuotes: true
});
result; // '<p title=blah id=moo>foo</p>'

Gulp

const { src, dest, series } = require('gulp');
const htmlMinify = require('html-minifier');

const options = {
  includeAutoGeneratedTags: true,
  removeAttributeQuotes: true,
  removeComments: true,
  removeRedundantAttributes: true,
  removeScriptTypeAttributes: true,
  removeStyleLinkTypeAttributes: true,
  sortClassName: true,
  useShortDoctype: true,
  collapseWhitespace: true
};

function html() {
  return src('app/**/*.html')
    .on('data', function(file) {
      const buferFile = Buffer.from(htmlMinify.minify(file.contents.toString(), options))
      return file.contents = buferFile
    })
    .pipe(dest('build'))
}

exports.html = series(html)

Running benchmarks

Benchmarks for minified HTML:

node benchmark.js

项目地址：https://github.com/kangax/html-minifier