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 <[email protected]>

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"

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"

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;