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

This commit is contained in:
Steve Repsher 2023-03-22 06:42:16 -04:00 committed by GitHub
parent 89decd2f31
commit 4abc2a65cb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 87 additions and 103 deletions

View File

@ -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
},
],

View File

@ -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 () => {

View File

@ -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",

View File

@ -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>

121
yarn.lock
View File

@ -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"