html-minifier中文文档

  HTMLMinifier是一个高度可配置的、经过良好测试的、基于javascript的HTML缩小器。参见相应的博客文章,了解它的工作原理、每个选项的描述、测试结果和结论。在线测试套件。还可以看到相应的Ruby包装器和节点。js, 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在显示之间不要留下任何空格:内联;崩溃时的元素。必须与折叠空间结合使用=true ?false
conservativeCollapse总是折叠到1个空间(永远不要完全删除它)。必须与折叠空间结合使用=true ?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-css)false (could betrueObject,Function(text))
minifyJS在脚本元素和事件属性中缩小JavaScript(使用UglifyJS)false (could betrueObject,Function(text, inline))
minifyURLs在各种属性中缩小url(使用relateurl)false (could beStringObject,Function(text))
preserveLineBreaks当标记之间的空格包括换行符时,总是崩溃到1行中断(永远不要完全删除)。必须与折叠空间结合使用=true ?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压缩率。

  英文文档链接:https://github.com/kangax/html-minifier#user-content-options-quick-reference

转载于:https://www.cnblogs.com/YangJieCheng/p/8302975.html

在Vite中使用html-minifier-terser插件可以对HTML进行压缩和优化。你可以在Vite的配置文件中添加以下代码来使用该插件: ```javascript const htmlMinifierPlugin = require('html-minifier-terser'); module.exports = { // 其他配置项... plugins: \[ htmlMinifierPlugin({ // 配置项... }) \] } ``` 你可以根据需要配置html-minifier-terser插件的选项来进行定制化的压缩和优化。例如,你可以设置`collapseWhitespace`选项来移除HTML中的空白字符,或者设置`removeComments`选项来移除注释等。具体的配置项可以参考html-minifier-terser的文档。 引用\[1\]中的代码是使用SpeedMeasurePlugin来测量打包时间的插件,并使用smp.wrap方法包裹了导出的webpack配置。这样可以在控制台中看到每个插件的执行时间,以便进行性能优化。 引用\[2\]中的代码是使用PurgeCssPlugin来移除未使用的CSS样式的插件,并通过safelist属性来保留指定的HTML标签的样式。 引用\[3\]中提到了一些在代码中可能存在的问题,例如使用了ES6的语法、模块化语法和CommonJS的模块化语法,以及在通过script标签引入时需要添加type="module"属性。这些问题可能会导致在低版本浏览器上出现兼容性问题。 #### 引用[.reference_title] - *1* *2* *3* [Webpack从入门到进阶(三)---附沿路学习案例代码](https://blog.csdn.net/wuyxinu/article/details/123221905)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值