Move compression from Webpack to Gulp (#4074)

build-scripts/gulp/app.js

@@ -5,6 +5,7 @@ require("./clean.js");
 require("./translations.js");
 require("./gen-icons.js");
 require("./gather-static.js");
+require("./compress.js");
 require("./webpack.js");
 require("./service-worker.js");
 require("./entry-html.js");
@@ -37,11 +38,8 @@ gulp.task(
     "clean",
     gulp.parallel("gen-icons", "build-translations"),
     "copy-static",
-    gulp.parallel(
-      "webpack-prod-app",
-      // Do not compress static files in CI, it's SLOW.
-      ...(process.env.CI === "true" ? [] : ["compress-static"])
-    ),
+    "webpack-prod-app",
+    ...(process.env.CI === "true" ? [] : ["compress-app"]),
     gulp.parallel(
       "gen-pages-prod",
       "gen-index-app-prod",

build-scripts/gulp/compress.js

@@ -0,0 +1,31 @@
+// Tasks to compress
+
+const gulp = require("gulp");
+const zopfli = require("gulp-zopfli-green");
+const merge = require("merge-stream");
+const path = require("path");
+const paths = require("../paths");
+
+gulp.task("compress-app", function compressApp() {
+  const jsLatest = gulp
+    .src(path.resolve(paths.output, "**/*.js"))
+    .pipe(zopfli())
+    .pipe(gulp.dest(paths.output));
+
+  const jsEs5 = gulp
+    .src(path.resolve(paths.output_es5, "**/*.js"))
+    .pipe(zopfli())
+    .pipe(gulp.dest(paths.output_es5));
+
+  const polyfills = gulp
+    .src(path.resolve(paths.static, "polyfills/*.js"))
+    .pipe(zopfli())
+    .pipe(gulp.dest(path.resolve(paths.static, "polyfills")));
+
+  const translations = gulp
+    .src(path.resolve(paths.static, "translations/*.json"))
+    .pipe(zopfli())
+    .pipe(gulp.dest(path.resolve(paths.static, "translations")));
+
+  return merge(jsLatest, jsEs5, polyfills, translations);
+});

build-scripts/gulp/gather-static.js

@@ -4,8 +4,6 @@ const gulp = require("gulp");
 const path = require("path");
 const cpx = require("cpx");
 const fs = require("fs-extra");
-const zopfli = require("gulp-zopfli-green");
-const merge = require("merge-stream");
 const paths = require("../paths");
 
 const npmPath = (...parts) =>
@@ -67,20 +65,6 @@ function copyMapPanel(staticDir) {
   );
 }
 
-function compressStatic(staticDir) {
-  const staticPath = genStaticPath(staticDir);
-  const polyfills = gulp
-    .src(staticPath("polyfills/*.js"))
-    .pipe(zopfli())
-    .pipe(gulp.dest(staticPath("polyfills")));
-  const translations = gulp
-    .src(staticPath("translations/*.json"))
-    .pipe(zopfli())
-    .pipe(gulp.dest(staticPath("translations")));
-
-  return merge(polyfills, translations);
-}
-
 gulp.task("copy-static", (done) => {
   const staticDir = paths.static;
   const staticPath = genStaticPath(paths.static);
@@ -100,8 +84,6 @@ gulp.task("copy-static", (done) => {
   done();
 });
 
-gulp.task("compress-static", () => compressStatic(paths.static));
-
 gulp.task("copy-static-demo", (done) => {
   // Copy app static files
   fs.copySync(

build-scripts/webpack.js

@@ -3,8 +3,6 @@ const fs = require("fs");
 const path = require("path");
 const TerserPlugin = require("terser-webpack-plugin");
 const WorkboxPlugin = require("workbox-webpack-plugin");
-const CompressionPlugin = require("compression-webpack-plugin");
-const zopfli = require("@gfx/zopfli");
 const ManifestPlugin = require("webpack-manifest-plugin");
 const paths = require("./paths.js");
 const { babelLoaderConfig } = require("./babel.js");
@@ -134,16 +132,6 @@ const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
         ),
       }),
       ...plugins,
-      isProdBuild &&
-        !isCI &&
-        !isStatsBuild &&
-        new CompressionPlugin({
-          cache: true,
-          exclude: [/\.js\.map$/, /\.LICENSE$/, /\.py$/, /\.txt$/],
-          algorithm(input, compressionOptions, callback) {
-            return zopfli.gzip(input, compressionOptions, callback);
-          },
-        }),
       latestBuild &&
         new WorkboxPlugin.InjectManifest({
           swSrc: "./src/entrypoints/service-worker-hass.js",