diff options
author | Ed Tanous <ed@tanous.net> | 2024-04-09 00:27:07 +0300 |
---|---|---|
committer | Ed Tanous <ed@tanous.net> | 2024-04-09 02:35:41 +0300 |
commit | f8207740c3897532207f66da01facc41ea13c020 (patch) | |
tree | 5d3a7833f8b04fd62f722a0dc245ab13033fbb01 | |
parent | d4eaf8bb87479241fe518be1cc753b2067fe3df3 (diff) | |
download | webui-vue-f8207740c3897532207f66da01facc41ea13c020.tar.xz |
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>
-rw-r--r-- | package-lock.json | 36 | ||||
-rw-r--r-- | package.json | 1 | ||||
-rw-r--r-- | src/layouts/LoginLayout.vue | 2 | ||||
-rw-r--r-- | 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; |