htmlnano.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  1. /*
  2. * Copyright 2018 Gildas Lormeau
  3. * contact : gildas.lormeau <at> gmail.com
  4. *
  5. * The MIT License (MIT)
  6. *
  7. * Copyright (c) 2018
  8. *
  9. * Permission is hereby granted, free of charge, to any person obtaining a copy
  10. * of this software and associated documentation files (the "Software"), to deal
  11. * in the Software without restriction, including without limitation the rights
  12. * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  13. * copies of the Software, and to permit persons to whom the Software is
  14. * furnished to do so, subject to the following conditions:
  15. *
  16. * The above copyright notice and this permission notice shall be included in all
  17. * copies or substantial portions of the Software.
  18. *
  19. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  20. * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  21. * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  22. * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  23. * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  24. * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  25. * SOFTWARE.
  26. */
  27. // Derived from the work of Kirill Maltsev - https://github.com/posthtml/htmlnano
  28. /* global Node, NodeFilter */
  29. this.htmlnano = this.htmlnano || (() => {
  30. // Source: https://github.com/kangax/html-minifier/issues/63
  31. const booleanAttributes = [
  32. "allowfullscreen",
  33. "async",
  34. "autofocus",
  35. "autoplay",
  36. "checked",
  37. "compact",
  38. "controls",
  39. "declare",
  40. "default",
  41. "defaultchecked",
  42. "defaultmuted",
  43. "defaultselected",
  44. "defer",
  45. "disabled",
  46. "enabled",
  47. "formnovalidate",
  48. "hidden",
  49. "indeterminate",
  50. "inert",
  51. "ismap",
  52. "itemscope",
  53. "loop",
  54. "multiple",
  55. "muted",
  56. "nohref",
  57. "noresize",
  58. "noshade",
  59. "novalidate",
  60. "nowrap",
  61. "open",
  62. "pauseonexit",
  63. "readonly",
  64. "required",
  65. "reversed",
  66. "scoped",
  67. "seamless",
  68. "selected",
  69. "sortable",
  70. "truespeed",
  71. "typemustmatch",
  72. "visible"
  73. ];
  74. const noWhitespaceCollapseElements = ["script", "style", "pre", "textarea"];
  75. // Source: https://www.w3.org/TR/html4/sgml/dtd.html#events (Generic Attributes)
  76. const safeToRemoveAttrs = [
  77. "id",
  78. "class",
  79. "style",
  80. "title",
  81. "lang",
  82. "dir",
  83. "onclick",
  84. "ondblclick",
  85. "onmousedown",
  86. "onmouseup",
  87. "onmouseover",
  88. "onmousemove",
  89. "onmouseout",
  90. "onkeypress",
  91. "onkeydown",
  92. "onkeyup"
  93. ];
  94. const redundantAttributes = {
  95. "form": {
  96. "method": "get"
  97. },
  98. "input": {
  99. "type": "text"
  100. },
  101. "button": {
  102. "type": "submit"
  103. },
  104. "script": {
  105. "language": "javascript",
  106. "type": "text/javascript",
  107. // Remove attribute if the function returns false
  108. "charset": node => {
  109. // The charset attribute only really makes sense on “external” SCRIPT elements:
  110. // http://perfectionkills.com/optimizing-html/#8_script_charset
  111. return !node.getAttribute("src");
  112. }
  113. },
  114. "style": {
  115. "media": "all",
  116. "type": "text/css"
  117. },
  118. "link": {
  119. "media": "all"
  120. }
  121. };
  122. const modules = [collapseBooleanAttributes, collapseWhitespace, removeComments, removeEmptyAttributes, removeRedundantAttributes];
  123. return {
  124. process: doc => {
  125. const nodesWalker = doc.createTreeWalker(doc.documentElement, NodeFilter.SHOW_ALL, null, false);
  126. let node = nodesWalker.nextNode();
  127. while (node) {
  128. const deletedNode = modules.find(module => module(node));
  129. const previousNode = node;
  130. node = nodesWalker.nextNode();
  131. if (deletedNode) {
  132. previousNode.remove();
  133. }
  134. }
  135. }
  136. };
  137. function collapseBooleanAttributes(node) {
  138. if (node.nodeType == Node.ELEMENT_NODE) {
  139. node.getAttributeNames().forEach(attributeName => {
  140. if (booleanAttributes.includes(attributeName)) {
  141. node.setAttribute(attributeName, "");
  142. }
  143. });
  144. }
  145. }
  146. /** Collapses redundant whitespaces */
  147. function collapseWhitespace(node) {
  148. if (node.nodeType == Node.TEXT_NODE) {
  149. if (node.previousSibling && node.previousSibling.nodeType == Node.TEXT_NODE) {
  150. node.textContent = node.previousSibling.textContent + node.textContent;
  151. node.previousSibling.remove();
  152. }
  153. let element = node.parentElement;
  154. let textContent = node.textContent;
  155. while (noWhitespaceCollapse(element)) {
  156. element = element.parentElement;
  157. }
  158. if ((!element || noWhitespaceCollapse(element)) && textContent.match(/\s+/) && textContent.length > 1) {
  159. let lastTextContent;
  160. while (lastTextContent != textContent) {
  161. lastTextContent = textContent;
  162. textContent = textContent.replace(/( )+|(\n)+|(\t)+|(\f)+||(\r)+/g, "$1");
  163. }
  164. node.textContent = textContent;
  165. }
  166. }
  167. }
  168. function noWhitespaceCollapse(element) {
  169. return element && !noWhitespaceCollapseElements.includes(element.tagName.toLowerCase());
  170. }
  171. /** Removes HTML comments */
  172. function removeComments(node) {
  173. if (node.nodeType == Node.COMMENT_NODE) {
  174. return !node.textContent.toLowerCase().trim().startsWith("[if");
  175. }
  176. }
  177. /** Removes empty attributes */
  178. function removeEmptyAttributes(node) {
  179. if (node.nodeType == Node.ELEMENT_NODE) {
  180. node.getAttributeNames().forEach(attributeName => {
  181. if (safeToRemoveAttrs.includes(attributeName.toLowerCase())) {
  182. const attributeValue = node.getAttribute(attributeName);
  183. if (attributeValue === "" || (attributeValue || "").match(/^\s+$/)) {
  184. node.removeAttribute(attributeName);
  185. }
  186. }
  187. });
  188. }
  189. }
  190. /** Removes redundant attributes */
  191. function removeRedundantAttributes(node) {
  192. if (node.nodeType == Node.ELEMENT_NODE) {
  193. const tagRedundantAttributes = redundantAttributes[node.tagName.toLowerCase()];
  194. if (tagRedundantAttributes) {
  195. Object.keys(tagRedundantAttributes).forEach(redundantAttributeName => {
  196. const tagRedundantAttributeValue = tagRedundantAttributes[redundantAttributeName];
  197. if (typeof tagRedundantAttributeValue == "function" ? tagRedundantAttributeValue(node) : node.getAttribute(redundantAttributeName) == tagRedundantAttributeValue) {
  198. node.removeAttribute(redundantAttributeName);
  199. }
  200. });
  201. }
  202. }
  203. }
  204. })();