Optimize z-related components: Bundle analyzer, Brotli compression, ZXing lazy loading

Co-authored-by: jbtronics <[email protected]>

Author: Copilot

assets/controllers/pages/barcode_scan_controller.js

@@ -33,6 +33,11 @@ export default class extends Controller {
     connect() {
         console.log('Init Scanner');
 
+        // Configure ZXing WASM when scanner is actually used (optimization)
+        import('../../js/zxing_config').then(({ configureZXing }) => {
+            configureZXing();
+        }).catch(console.error);
+
         //This function ensures, that the qrbox is 70% of the total viewport
         let qrboxFunction = function(viewfinderWidth, viewfinderHeight) {
             let minEdgePercentage = 0.7; // 70%

assets/js/app.js

@@ -46,16 +46,5 @@ import "./tristate_checkboxes";
 //Define jquery globally
 window.$ = window.jQuery = require("jquery");
 
-//Use the local WASM file for the ZXing library
-import {
-    setZXingModuleOverrides,
-} from "barcode-detector/ponyfill";
-import  wasmFile from "../../node_modules/zxing-wasm/dist/reader/zxing_reader.wasm";
-setZXingModuleOverrides({
-    locateFile: (path, prefix) => {
-        if (path.endsWith(".wasm")) {
-            return wasmFile;
-        }
-        return prefix + path;
-    },
-});
+//ZXing WASM configuration now loaded only when barcode scanner is used
+// This improves app startup time significantly

assets/js/zxing_config.js

@@ -0,0 +1,35 @@
+/*
+ * This file is part of Part-DB (https://github.com/Part-DB/Part-DB-symfony).
+ *
+ * Copyright (C) 2019 - 2020 Jan Böhmer (https://github.com/jbtronics)
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published
+ * by the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+//Optimized ZXing WASM configuration - loaded on demand to improve app startup
+import {
+    setZXingModuleOverrides,
+} from "barcode-detector/ponyfill";
+import wasmFile from "../../node_modules/zxing-wasm/dist/reader/zxing_reader.wasm";
+
+export function configureZXing() {
+    setZXingModuleOverrides({
+        locateFile: (path, prefix) => {
+            if (path.endsWith(".wasm")) {
+                return wasmFile;
+            }
+            return prefix + path;
+        },
+    });
+}

webpack.config.js

@@ -175,7 +175,7 @@ if (Encore.isProduction()) {
         test: /\.(js|css|html|svg)$/,
         compressionOptions: {
             // zlib’s `level` option matches Brotli’s `BROTLI_PARAM_QUALITY` option.
-            level: 11,
+            level: 6,
         },
         //threshold: 10240,
         minRatio: 0.8,
@@ -190,9 +190,9 @@ if (Encore.isProduction()) {
         }))
 }
 
-if (Encore.isDev()) {
+if (Encore.isDev() && !process.env.CI) {
     //Only uncomment if needed, as this cause problems with Github actions (job does not finish)
-    Encore.addPlugin(new BundleAnalyzerPlugin());
+    //Encore.addPlugin(new BundleAnalyzerPlugin());
 }