Use Brotli compression for modern build (#17906)

build-scripts/gulp/compress.js

@@ -1,19 +1,54 @@
 // Tasks to compress
 
+import { constants } from "node:zlib";
 import gulp from "gulp";
+import brotli from "gulp-brotli";
 import zopfli from "gulp-zopfli-green";
 import paths from "../paths.cjs";
 
+const filesGlob = "*.{js,json,css,svg,xml}";
+const brotliOptions = {
+  skipLarger: true,
+  params: {
+    [constants.BROTLI_PARAM_QUALITY]: constants.BROTLI_MAX_QUALITY,
+  },
+};
 const zopfliOptions = { threshold: 150 };
 
-const compressDist = (rootDir) =>
+const compressDistBrotli = (rootDir, modernDir) =>
   gulp
-    .src([
+    .src([`${modernDir}/**/${filesGlob}`, `${rootDir}/sw-modern.js`], {
-      `${rootDir}/**/*.{js,json,css,svg,xml}`,
+      base: rootDir,
-      `${rootDir}/{authorize,onboarding}.html`,
+    })
-    ])
+    .pipe(brotli(brotliOptions))
+    .pipe(gulp.dest(rootDir));
+
+const compressDistZopfli = (rootDir, modernDir) =>
+  gulp
+    .src(
+      [
+        `${rootDir}/**/${filesGlob}`,
+        `!${modernDir}/**/${filesGlob}`,
+        `!${rootDir}/sw-modern.js`,
+        `${rootDir}/{authorize,onboarding}.html`,
+      ],
+      { base: rootDir }
+    )
     .pipe(zopfli(zopfliOptions))
     .pipe(gulp.dest(rootDir));
 
-gulp.task("compress-app", () => compressDist(paths.app_output_root));
+const compressAppBrotli = () =>
-gulp.task("compress-hassio", () => compressDist(paths.hassio_output_root));
+  compressDistBrotli(paths.app_output_root, paths.app_output_latest);
+const compressHassioBrotli = () =>
+  compressDistBrotli(paths.hassio_output_root, paths.hassio_output_latest);
+
+const compressAppZopfli = () =>
+  compressDistZopfli(paths.app_output_root, paths.app_output_latest);
+const compressHassioZopfli = () =>
+  compressDistZopfli(paths.hassio_output_root, paths.hassio_output_latest);
+
+gulp.task("compress-app", gulp.parallel(compressAppBrotli, compressAppZopfli));
+gulp.task(
+  "compress-hassio",
+  gulp.parallel(compressHassioBrotli, compressHassioZopfli)
+);

package.json

@@ -208,6 +208,7 @@
     "fs-extra": "11.2.0",
     "glob": "11.0.0",
     "gulp": "5.0.0",
+    "gulp-brotli": "3.0.0",
     "gulp-json-transform": "0.5.0",
     "gulp-rename": "2.0.0",
     "gulp-zopfli-green": "6.0.2",

yarn.lock

@@ -8790,6 +8790,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"gulp-brotli@npm:3.0.0":
+  version: 3.0.0
+  resolution: "gulp-brotli@npm:3.0.0"
+  dependencies:
+    plugin-error: "npm:^1.0.1"
+    through2: "npm:^3.0.1"
+  checksum: 10/0eea1fc60ae7f256184155b61a30a916007d21d37234698d8cdb299f64f71b4d68ca3182528e7da5d71290079c32c0228573578b76f5af7af7230c31537ef9d2
+  languageName: node
+  linkType: hard
+
 "gulp-cli@npm:^3.0.0":
   version: 3.0.0
   resolution: "gulp-cli@npm:3.0.0"
@@ -9109,6 +9119,7 @@ __metadata:
     glob: "npm:11.0.0"
     google-timezones-json: "npm:1.2.0"
     gulp: "npm:5.0.0"
+    gulp-brotli: "npm:3.0.0"
     gulp-json-transform: "npm:0.5.0"
     gulp-rename: "npm:2.0.0"
     gulp-zopfli-green: "npm:6.0.2"
@@ -11523,9 +11534,9 @@ __metadata:
   linkType: hard
 
 "object-inspect@npm:^1.13.1":
-  version: 1.13.2
+  version: 1.13.1
-  resolution: "object-inspect@npm:1.13.2"
+  resolution: "object-inspect@npm:1.13.1"
-  checksum: 10/7ef65583b6397570a17c56f0c1841e0920e83900f2c94638927abb7b81ac08a19c7aae135bd9dcca96208cac0c7332b4650fb927f027b0cf92d71df2990d0561
+  checksum: 10/92f4989ed83422d56431bc39656d4c780348eb15d397ce352ade6b7fec08f973b53744bd41b94af021901e61acaf78fcc19e65bf464ecc0df958586a672700f0
   languageName: node
   linkType: hard
 
@@ -12416,7 +12427,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"readable-stream@npm:3, readable-stream@npm:^3.0.6, readable-stream@npm:^3.4.0, readable-stream@npm:^3.6.0":
+"readable-stream@npm:2 || 3, readable-stream@npm:3, readable-stream@npm:^3.0.6, readable-stream@npm:^3.4.0, readable-stream@npm:^3.6.0":
   version: 3.6.2
   resolution: "readable-stream@npm:3.6.2"
   dependencies:
@@ -13957,6 +13968,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"through2@npm:^3.0.1":
+  version: 3.0.2
+  resolution: "through2@npm:3.0.2"
+  dependencies:
+    inherits: "npm:^2.0.4"
+    readable-stream: "npm:2 || 3"
+  checksum: 10/98bdffba8e877fd8beb2154adc4eb0d52fad281130f56f6e5d18f85d1e1aa528a7b27317b302eb5443f6636ab045d3c272e6dffc61d984775db284823b90532d
+  languageName: node
+  linkType: hard
+
 "through2@npm:^4.0.2":
   version: 4.0.2
   resolution: "through2@npm:4.0.2"