Migrate to html-minifier-terser and improve some minification (#15864)

build-scripts/bundle.js

@@ -62,7 +62,7 @@ module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
   ...defineOverlay,
 });
 
-const htmlMinifierOptions = {
+module.exports.htmlMinifierOptions = {
   caseSensitive: true,
   collapseWhitespace: true,
   conservativeCollapse: true,
@@ -70,7 +70,12 @@ const htmlMinifierOptions = {
   removeComments: true,
   removeRedundantAttributes: true,
   minifyCSS: {
-    level: 0,
+    level: {
+      1: {
+        all: false,
+        removeWhitespace: true,
+      },
+    },
   },
 };
 
@@ -135,7 +140,7 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
           "@polymer/polymer/lib/utils/html-tag": ["html"],
         },
         strictCSS: true,
-        htmlMinifier: htmlMinifierOptions,
+        htmlMinifier: module.exports.htmlMinifierOptions,
         failOnError: true, // we can turn this off in case of false positives
       },
     ],

build-scripts/gulp/entry-html.js

@@ -3,9 +3,10 @@ const gulp = require("gulp");
 const fs = require("fs-extra");
 const path = require("path");
 const template = require("lodash.template");
-const minify = require("html-minifier").minify;
+const { minify } = require("html-minifier-terser");
 const paths = require("../paths.js");
 const env = require("../env.js");
+const { htmlMinifierOptions, terserOptions } = require("../bundle.js");
 
 const templatePath = (tpl) =>
   path.resolve(paths.polymer_dir, "src/html/", `${tpl}.html.template`);
@@ -39,10 +40,12 @@ const renderGalleryTemplate = (pth, data = {}) =>
 
 const minifyHtml = (content) =>
   minify(content, {
-    collapseWhitespace: true,
+    ...htmlMinifierOptions,
-    minifyJS: true,
+    conservativeCollapse: false,
-    minifyCSS: true,
+    minifyJS: terserOptions({
-    removeComments: true,
+      latestBuild: false, // Shared scripts should be ES5
+      isTestBuild: true, // Don't need source maps
+    }),
   });
 
 const PAGES = ["onboarding", "authorize"];
@@ -63,7 +66,7 @@ gulp.task("gen-pages-dev", (done) => {
   done();
 });
 
-gulp.task("gen-pages-prod", (done) => {
+gulp.task("gen-pages-prod", async () => {
   const latestManifest = require(path.resolve(
     paths.app_output_latest,
     "manifest.json"
@@ -73,19 +76,23 @@ gulp.task("gen-pages-prod", (done) => {
     "manifest.json"
   ));
 
+  const minifiedHTML = [];
   for (const page of PAGES) {
     const content = renderTemplate(page, {
       latestPageJS: latestManifest[`${page}.js`],
-
       es5PageJS: es5Manifest[`${page}.js`],
     });
 
+    minifiedHTML.push(
+      minifyHtml(content).then((minified) =>
         fs.outputFileSync(
           path.resolve(paths.app_output_root, `${page}.html`),
-      minifyHtml(content)
+          minified
+        )
+      )
     );
   }
-  done();
+  await Promise.all(minifiedHTML);
 });
 
 gulp.task("gen-index-app-dev", (done) => {
@@ -118,7 +125,7 @@ gulp.task("gen-index-app-dev", (done) => {
   done();
 });
 
-gulp.task("gen-index-app-prod", (done) => {
+gulp.task("gen-index-app-prod", async () => {
   const latestManifest = require(path.resolve(
     paths.app_output_latest,
     "manifest.json"
@@ -136,13 +143,15 @@ gulp.task("gen-index-app-prod", (done) => {
     es5CoreJS: es5Manifest["core.js"],
     es5CustomPanelJS: es5Manifest["custom-panel.js"],
   });
-  const minified = minifyHtml(content).replace(/#THEMEC/g, "{{ theme_color }}");
+  const minified = (await minifyHtml(content)).replace(
+    /#THEMEC/g,
+    "{{ theme_color }}"
+  );
 
   fs.outputFileSync(
     path.resolve(paths.app_output_root, "index.html"),
     minified
   );
-  done();
 });
 
 gulp.task("gen-index-cast-dev", (done) => {
@@ -244,7 +253,7 @@ gulp.task("gen-index-demo-dev", (done) => {
   done();
 });
 
-gulp.task("gen-index-demo-prod", (done) => {
+gulp.task("gen-index-demo-prod", async () => {
   const latestManifest = require(path.resolve(
     paths.demo_output_latest,
     "manifest.json"
@@ -258,13 +267,12 @@ gulp.task("gen-index-demo-prod", (done) => {
 
     es5DemoJS: es5Manifest["main.js"],
   });
-  const minified = minifyHtml(content);
+  const minified = await minifyHtml(content);
 
   fs.outputFileSync(
     path.resolve(paths.demo_output_root, "index.html"),
     minified
   );
-  done();
 });
 
 gulp.task("gen-index-gallery-dev", (done) => {
@@ -279,7 +287,7 @@ gulp.task("gen-index-gallery-dev", (done) => {
   done();
 });
 
-gulp.task("gen-index-gallery-prod", (done) => {
+gulp.task("gen-index-gallery-prod", async () => {
   const latestManifest = require(path.resolve(
     paths.gallery_output_latest,
     "manifest.json"
@@ -287,13 +295,12 @@ gulp.task("gen-index-gallery-prod", (done) => {
   const content = renderGalleryTemplate("index", {
     latestGalleryJS: latestManifest["entrypoint.js"],
   });
-  const minified = minifyHtml(content);
+  const minified = await minifyHtml(content);
 
   fs.outputFileSync(
     path.resolve(paths.gallery_output_root, "index.html"),
     minified
   );
-  done();
 });
 
 gulp.task("gen-index-hassio-dev", async () => {

package.json

@@ -172,6 +172,7 @@
     "@types/chromecast-caf-sender": "1.0.5",
     "@types/esprima": "4.0.3",
     "@types/glob": "8.1.0",
+    "@types/html-minifier-terser": "7.0.0",
     "@types/js-yaml": "4.0.5",
     "@types/leaflet": "1.9.3",
     "@types/leaflet-draw": "1.0.6",
@@ -211,7 +212,7 @@
     "gulp-merge-json": "2.1.2",
     "gulp-rename": "2.0.0",
     "gulp-zopfli-green": "6.0.1",
-    "html-minifier": "4.0.0",
+    "html-minifier-terser": "7.1.0",
     "husky": "8.0.3",
     "instant-mocha": "1.5.0",
     "jszip": "3.10.1",

src/html/index.html.template

@@ -102,9 +102,9 @@
       }
     </script>
     <script>
-    {% for extra_module in extra_modules -%}
+    {%- for extra_module in extra_modules -%}
     import("{{ extra_module }}");
-    {% endfor -%}
+    {%- endfor -%}
     </script>
 
     <script>
@@ -127,9 +127,9 @@
     </script>
     <script>
       if (!window.latestJS) {
-        {% for extra_script in extra_js_es5 -%}
+        {%- for extra_script in extra_js_es5 -%}
         _ls("{{ extra_script }}");
-        {% endfor -%}
+        {%- endfor -%}
       }
     </script>
   </body>

yarn.lock

@@ -4280,6 +4280,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/html-minifier-terser@npm:7.0.0":
+  version: 7.0.0
+  resolution: "@types/html-minifier-terser@npm:7.0.0"
+  checksum: a7a42816bdacf507c9df764c0de6b55b00bfc341e69b8a2adb936aa68da8c7eb73c3d58957d9fd74610198893bce1c73f40fdbb47f468b2621eb4ccdbc3c9ba1
+  languageName: node
+  linkType: hard
+
 "@types/http-assert@npm:*":
   version: 1.5.1
   resolution: "@types/http-assert@npm:1.5.1"
@@ -6370,17 +6377,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"camel-case@npm:^3.0.0":
+"camel-case@npm:^4.1.1, camel-case@npm:^4.1.2":
-  version: 3.0.0
-  resolution: "camel-case@npm:3.0.0"
-  dependencies:
-    no-case: ^2.2.0
-    upper-case: ^1.1.1
-  checksum: 4190ed6ab8acf4f3f6e1a78ad4d0f3f15ce717b6bfa1b5686d58e4bcd29960f6e312dd746b5fa259c6d452f1413caef25aee2e10c9b9a580ac83e516533a961a
-  languageName: node
-  linkType: hard
-
-"camel-case@npm:^4.1.1":
   version: 4.1.2
   resolution: "camel-case@npm:4.1.2"
   dependencies:
@@ -6552,6 +6549,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"clean-css@npm:5.2.0":
+  version: 5.2.0
+  resolution: "clean-css@npm:5.2.0"
+  dependencies:
+    source-map: ~0.6.0
+  checksum: ccb63b244b200abf53a005429b50132845a49b994fb6a2889a7eb775d53fbde7cb0d0b13655e435b0c3a6788d5d0fbcd2f56ccf32da852ef21ae933198dcad24
+  languageName: node
+  linkType: hard
+
 "clean-css@npm:^4.2.1, clean-css@npm:^4.2.3":
   version: 4.2.4
   resolution: "clean-css@npm:4.2.4"
@@ -6821,7 +6827,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"commander@npm:^2.19.0, commander@npm:^2.20.0, commander@npm:^2.20.3, commander@npm:~2.20.3":
+"commander@npm:^2.20.0, commander@npm:^2.20.3":
   version: 2.20.3
   resolution: "commander@npm:2.20.3"
   checksum: ab8c07884e42c3a8dbc5dd9592c606176c7eb5c1ca5ff274bcf907039b2c41de3626f684ea75ccf4d361ba004bbaff1f577d5384c155f3871e456bdf27becf9e
@@ -7628,6 +7634,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"entities@npm:^4.4.0":
+  version: 4.4.0
+  resolution: "entities@npm:4.4.0"
+  checksum: 84d250329f4b56b40fa93ed067b194db21e8815e4eb9b59f43a086f0ecd342814f6bc483de8a77da5d64e0f626033192b1b4f1792232a7ea6b970ebe0f3187c2
+  languageName: node
+  linkType: hard
+
 "env-paths@npm:^2.2.0":
   version: 2.2.1
   resolution: "env-paths@npm:2.2.1"
@@ -9560,6 +9573,7 @@ fsevents@~2.3.2:
     "@types/chromecast-caf-sender": 1.0.5
     "@types/esprima": 4.0.3
     "@types/glob": 8.1.0
+    "@types/html-minifier-terser": 7.0.0
     "@types/js-yaml": 4.0.5
     "@types/leaflet": 1.9.3
     "@types/leaflet-draw": 1.0.6
@@ -9620,7 +9634,7 @@ fsevents@~2.3.2:
     gulp-zopfli-green: 6.0.1
     hls.js: 1.3.5
     home-assistant-js-websocket: 8.0.1
-    html-minifier: 4.0.0
+    html-minifier-terser: 7.1.0
     husky: 8.0.3
     idb-keyval: 6.2.0
     instant-mocha: 1.5.0
@@ -9736,6 +9750,23 @@ fsevents@~2.3.2:
   languageName: node
   linkType: hard
 
+"html-minifier-terser@npm:7.1.0":
+  version: 7.1.0
+  resolution: "html-minifier-terser@npm:7.1.0"
+  dependencies:
+    camel-case: ^4.1.2
+    clean-css: 5.2.0
+    commander: ^9.4.1
+    entities: ^4.4.0
+    param-case: ^3.0.4
+    relateurl: ^0.2.7
+    terser: ^5.15.1
+  bin:
+    html-minifier-terser: cli.js
+  checksum: 351de28d85f142314a6a9b5222bdcaf068cef6bf2f521952ef55d99a6acdcecd0b4dbc42578da2d438d579c6e868b899ca19eac901ee6f9f0c69c223b5942099
+  languageName: node
+  linkType: hard
+
 "html-minifier-terser@npm:^5.0.0":
   version: 5.1.1
   resolution: "html-minifier-terser@npm:5.1.1"
@@ -9753,23 +9784,6 @@ fsevents@~2.3.2:
   languageName: node
   linkType: hard
 
-"html-minifier@npm:4.0.0":
-  version: 4.0.0
-  resolution: "html-minifier@npm:4.0.0"
-  dependencies:
-    camel-case: ^3.0.0
-    clean-css: ^4.2.1
-    commander: ^2.19.0
-    he: ^1.2.0
-    param-case: ^2.1.1
-    relateurl: ^0.2.7
-    uglify-js: ^3.5.1
-  bin:
-    html-minifier: ./cli.js
-  checksum: b426aee771d9da104c1c9554e3ebd3a4f483d2ce01f4dcc4156ba33a5959044acf6bea192d5ae63b290cdb92c30a9d07fd6924c65609aa82382ce411328f94ca
-  languageName: node
-  linkType: hard
-
 "http-assert@npm:^1.3.0":
   version: 1.4.1
   resolution: "http-assert@npm:1.4.1"
@@ -11516,13 +11530,6 @@ fsevents@~2.3.2:
   languageName: node
   linkType: hard
 
-"lower-case@npm:^1.1.1":
-  version: 1.1.4
-  resolution: "lower-case@npm:1.1.4"
-  checksum: 1ca9393b5eaef94a64e3f89e38b63d15bc7182a91171e6ad1550f51d710ec941540a065b274188f2e6b4576110cc2d11b50bc4bb7c603a040ddeb1db4ca95197
-  languageName: node
-  linkType: hard
-
 "lower-case@npm:^2.0.2":
   version: 2.0.2
   resolution: "lower-case@npm:2.0.2"
@@ -12184,15 +12191,6 @@ fsevents@~2.3.2:
   languageName: node
   linkType: hard
 
-"no-case@npm:^2.2.0":
-  version: 2.3.2
-  resolution: "no-case@npm:2.3.2"
-  dependencies:
-    lower-case: ^1.1.1
-  checksum: 856487731936fef44377ca74fdc5076464aba2e0734b56a4aa2b2a23d5b154806b591b9b2465faa59bb982e2b5c9391e3685400957fb4eeb38f480525adcf3dd
-  languageName: node
-  linkType: hard
-
 "no-case@npm:^3.0.4":
   version: 3.0.4
   resolution: "no-case@npm:3.0.4"
@@ -12765,16 +12763,7 @@ fsevents@~2.3.2:
   languageName: node
   linkType: hard
 
-"param-case@npm:^2.1.1":
+"param-case@npm:^3.0.3, param-case@npm:^3.0.4":
-  version: 2.1.1
-  resolution: "param-case@npm:2.1.1"
-  dependencies:
-    no-case: ^2.2.0
-  checksum: 3a63dcb8d8dc7995a612de061afdc7bb6fe7bd0e6db994db8d4cae999ed879859fd24389090e1a0d93f4c9207ebf8c048c870f468a3f4767161753e03cb9ab58
-  languageName: node
-  linkType: hard
-
-"param-case@npm:^3.0.3":
   version: 3.0.4
   resolution: "param-case@npm:3.0.4"
   dependencies:
@@ -15065,7 +15054,7 @@ fsevents@~2.3.2:
   languageName: node
   linkType: hard
 
-"terser@npm:^5.0.0, terser@npm:^5.16.5":
+"terser@npm:^5.0.0, terser@npm:^5.15.1, terser@npm:^5.16.5":
   version: 5.16.6
   resolution: "terser@npm:5.16.6"
   dependencies:
@@ -15537,17 +15526,6 @@ typescript@^3.8.3:
   languageName: node
   linkType: hard
 
-"uglify-js@npm:^3.5.1":
-  version: 3.9.3
-  resolution: "uglify-js@npm:3.9.3"
-  dependencies:
-    commander: ~2.20.3
-  bin:
-    uglifyjs: bin/uglifyjs
-  checksum: 942d38c74ade922c0ecd4960beb7c1586ea1c8ae5f1db6373fdc6996f89e9fc9e4f47901aa5b15ef8b1b7a8e6d30a1901485b6912aebfec05733305677670f75
-  languageName: node
-  linkType: hard
-
 "unbox-primitive@npm:^1.0.2":
   version: 1.0.2
   resolution: "unbox-primitive@npm:1.0.2"
@@ -15731,13 +15709,6 @@ typescript@^3.8.3:
   languageName: node
   linkType: hard
 
-"upper-case@npm:^1.1.1":
-  version: 1.1.3
-  resolution: "upper-case@npm:1.1.3"
-  checksum: 991c845de75fa56e5ad983f15e58494dd77b77cadd79d273cc11e8da400067e9881ae1a52b312aed79b3d754496e2e0712e08d22eae799e35c7f9ba6f3d8a85d
-  languageName: node
-  linkType: hard
-
 "uri-js@npm:^4.2.2":
   version: 4.2.2
   resolution: "uri-js@npm:4.2.2"