mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 09:46:36 +00:00
Migrate to html-minifier-terser and improve some minification (#15864)
This commit is contained in:
Steve Repsher
GitHub
parent
89decd2f31
commit
4abc2a65cb
@ -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
|
||||
},
|
||||
],
|
||||
|
||||
@ -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 () => {
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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
121
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"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user