HTMLMinifier是一個高度可配置的、經過良好測試的、基於javascript的HTML縮小器。參見相應的博客文章,了解它的工作原理、每個選項的描述、測試結果和結論。在線測試套件。還可以看到相應的Ruby包裝器和節點。js, Grunt插件,Gulp模塊,Koa中間件包裝和Express中間件包裝。對於類似lint的功能,請查看HTMLLint。
與其他解決方案相比,HTMLMinifier是如何與其他的解決方案相比較的呢? HTMLMinifier(第一個結果是在谷歌搜索“HTMLMinifier”)和htmlcompressor.com和最小化?
| Site | Original size (KB) | HTMLMinifier | minimize | Will Peavy | htmlcompressor.com |
|---|---|---|---|---|---|
| 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 |
| 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 |
在顯示之間不要留下任何空格:內聯;崩潰時的元素。必須與折疊空間結合使用=true ? | false |
conservativeCollapse |
總是折疊到1個空間(永遠不要完全刪除它)。必須與折疊空間結合使用=true ? | 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行中斷(永遠不要完全刪除)。必須與折疊空間結合使用=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
