From f8207740c3897532207f66da01facc41ea13c020 Mon Sep 17 00:00:00 2001
From: Ed Tanous <ed@tanous.net>
Date: Mon, 8 Apr 2024 14:27:07 -0700
Subject: Inline SVG

Having the SVG files loaded as a separate package significantly
increases the load time of the UI, as it forces the images to be
downloaded AFTER the page has loaded.

This commit adds the vue-svg-inline-loader, and appropriate config such
that the styles can be inlined, and a second trip to the BMC is not
required to load the login screen.  This improves the "time to glass" of
the webui quite a bit.

Tested: Webui loads.  Network tab shows svg files are not loaded.  Webui
login page looks correct.
First load of the webui renders 500ms faster (1.9s vs 1.4s)

Change-Id: Iebcd9ab5df6edad0a1a5c53c028eccd2fda8f63c
Signed-off-by: Ed Tanous <ed@tanous.net>
---
 package-lock.json           | 36 ++++++++++++++++++++++++++++++------
 package.json                |  1 +
 src/layouts/LoginLayout.vue |  2 ++
 vue.config.js               |  6 ++++++
 4 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 42eecbea..d482f663 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -49,6 +49,7 @@
                 "sass-loader": "8.0.0",
                 "vue-cli-plugin-i18n": "0.6.1",
                 "vue-server-renderer": "2.7.16",
+                "vue-svg-inline-loader": "2.1.5",
                 "vue-template-compiler": "2.6.12",
                 "vuepress": "1.8.2",
                 "yorkie": "2.0.0"
@@ -13927,12 +13928,6 @@
                 "@hapi/hoek": "^9.0.0"
             }
         },
-        "node_modules/jquery": {
-            "version": "3.7.1",
-            "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
-            "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
-            "peer": true
-        },
         "node_modules/js-beautify": {
             "version": "1.15.1",
             "dev": true,
@@ -21631,6 +21626,35 @@
                 "node": ">=4.0.0"
             }
         },
+        "node_modules/vue-svg-inline-loader": {
+            "version": "2.1.5",
+            "resolved": "https://registry.npmjs.org/vue-svg-inline-loader/-/vue-svg-inline-loader-2.1.5.tgz",
+            "integrity": "sha512-4CTMaVr7FKFz5NtEygRTUtAx3zlNQUKExG1Nrocwb8B/PKSTdKeanAcl60dxG8jPy53ews2rTwiUUbC52I3Drg==",
+            "dev": true,
+            "dependencies": {
+                "loader-utils": "^2.0.0",
+                "schema-utils": "^3.0.0",
+                "svgo": "^1.3.2"
+            }
+        },
+        "node_modules/vue-svg-inline-loader/node_modules/schema-utils": {
+            "version": "3.3.0",
+            "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+            "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+            "dev": true,
+            "dependencies": {
+                "@types/json-schema": "^7.0.8",
+                "ajv": "^6.12.5",
+                "ajv-keywords": "^3.5.2"
+            },
+            "engines": {
+                "node": ">= 10.13.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/webpack"
+            }
+        },
         "node_modules/vue-template-compiler": {
             "version": "2.6.12",
             "dev": true,
diff --git a/package.json b/package.json
index efdb8081..18f3aded 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
         "sass-loader": "8.0.0",
         "vue-cli-plugin-i18n": "0.6.1",
         "vue-server-renderer": "2.7.16",
+        "vue-svg-inline-loader": "2.1.5",
         "vue-template-compiler": "2.6.12",
         "vuepress": "1.8.2",
         "yorkie": "2.0.0"
diff --git a/src/layouts/LoginLayout.vue b/src/layouts/LoginLayout.vue
index cdff2040..dba1980e 100644
--- a/src/layouts/LoginLayout.vue
+++ b/src/layouts/LoginLayout.vue
@@ -5,6 +5,7 @@
         <div>
           <div class="login-brand mb-5">
             <img
+              svg-inline
               width="90px"
               src="@/assets/images/login-company-logo.svg"
               :alt="altLogo"
@@ -22,6 +23,7 @@
         </div>
         <div class="login-aside__logo-bmc">
           <img
+            svg-inline
             height="60px"
             src="@/assets/images/built-on-openbmc-logo.svg"
             alt="Built on OpenBMC"
diff --git a/vue.config.js b/vue.config.js
index ad5fb616..769f5c90 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -54,6 +54,12 @@ module.exports = {
     port: 8000,
   },
   productionSourceMap: false,
+  chainWebpack: (config) => {
+    config.module
+      .rule('vue')
+      .use('vue-svg-inline-loader')
+      .loader('vue-svg-inline-loader');
+  },
   configureWebpack: (config) => {
     const crypto = require('crypto');
     const crypto_orig_createHash = crypto.createHash;
-- 
cgit v1.2.3