From 4abc2a65cb6b2233bc414468601ce9c839fd3a84 Mon Sep 17 00:00:00 2001 From: Steve Repsher Date: Wed, 22 Mar 2023 06:42:16 -0400 Subject: [PATCH] Migrate to html-minifier-terser and improve some minification (#15864) --- build-scripts/bundle.js | 11 ++- build-scripts/gulp/entry-html.js | 47 +++++++----- package.json | 3 +- src/html/index.html.template | 8 +- yarn.lock | 121 ++++++++++++------------------- 5 files changed, 87 insertions(+), 103 deletions(-) diff --git a/build-scripts/bundle.js b/build-scripts/bundle.js index dfd7e12fd4..b7517720bc 100644 --- a/build-scripts/bundle.js +++ b/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 }, ], diff --git a/build-scripts/gulp/entry-html.js b/build-scripts/gulp/entry-html.js index 701e617627..14ead700c9 100644 --- a/build-scripts/gulp/entry-html.js +++ b/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, - minifyJS: true, - minifyCSS: true, - removeComments: true, + ...htmlMinifierOptions, + conservativeCollapse: false, + minifyJS: terserOptions({ + 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`], }); - fs.outputFileSync( - path.resolve(paths.app_output_root, `${page}.html`), - minifyHtml(content) + minifiedHTML.push( + minifyHtml(content).then((minified) => + fs.outputFileSync( + path.resolve(paths.app_output_root, `${page}.html`), + 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 () => { diff --git a/package.json b/package.json index 1a0466a12f..485c04025c 100644 --- a/package.json +++ b/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", diff --git a/src/html/index.html.template b/src/html/index.html.template index 56bc8860a0..d69742908f 100644 --- a/src/html/index.html.template +++ b/src/html/index.html.template @@ -102,9 +102,9 @@ } diff --git a/yarn.lock b/yarn.lock index e33ea8b070..8ed391791c 100644 --- a/yarn.lock +++ b/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": - 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": +"camel-case@npm:^4.1.1, camel-case@npm:^4.1.2": 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": - 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": +"param-case@npm:^3.0.3, param-case@npm:^3.0.4": 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"