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

2022-07-08 前端开发 0

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

缩小比较

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

SiteOriginal size (KB)HTMLMinifierminimizeWill Peavyhtmlcompressor.com
Google4643464846
HTMLMinifier133104112116111
New York Times214145163162152
BBC237194229235222
Stack Overflow248195204212201
Bootstrap CSS272260269229269
Twitter348260313345313
Amazon405349390403n/a
Wikipedia471440456471455
NBC646613642646n/a
Eloquent Javascript870815840864n/a
ES6 table458038984333n/an/a
ES6 draft572051035253n/an/a

可选参数

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

OptionDescriptionDefault
caseSensitive以区分大小写的方式处理属性,适用于定制的HTML标记false
collapseBooleanAttributes从布尔属性中省略属性值false
collapseInlineTagWhitespaceDon’t leave any spaces between display:inline;elements when collapsing. Must be used in conjunction with collapseWhitespace=truefalse
collapseWhitespace在显示之间不要留下任何空格,必须与折叠空间结合使用false
conservativeCollapse总是折叠到1个空间,永远不要完全删除它。必须与折叠空间结合使用false
customAttrAssign允许支持自定义属性分配表达式的正则表达式数组。 (e.g. '<div flex?="{{mode != cover}}"></div>')[ ]
customAttrCollapseRegex指定自定义属性以从(例如/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-cssfalse(could betrue, Object,Function(text))
minifyJS在脚本元素和事件属性中缩小 JavaScript,使用 UglifyJSfalse(could betrue, Object,Function(text, inline))
minifyURLs在各种属性中缩小 url,使用 relateurlfalse(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尽可能在属性之间移除空间。注意,这可能导致无效的 HTMLfalse
sortAttributes根据频率属性进行排序false
sortClassName按频率分类样式类。false
trimCustomFragments在ignoreCustomFragments周围调整空白区域false
useShortDoctype用short (HTML5) doctype替换doctypefalse

排序属性 / 样式类

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

使用案例

忽略标记块

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

保留 SVG 标签

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

使用无效标记

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

输入标记(例如 <p >foo

标记的内部表示以树的形式(例如 { tag: "p", attr: "id", children: ["foo"] }

内部表示的转换(例如移除 id属性)

结果标记的输出(例如 <p>foo</p>

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

安装说明

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

npm install html-minifier -g


来自 NPM 用于程序化用途:

npm install html-minifier


来自 Git:

 clone git://github.com/kangax/html-minifier.git


使用方法

请注意,默认情况下几乎所有选项都是禁用的。有关命令行用法,请参阅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