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>
diff --git a/package-lock.json b/package-lock.json
index 42eecbe..d482f66 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 efdb808..18f3ade 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 cdff204..dba1980 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 ad5fb61..769f5c9 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -54,6 +54,12 @@
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;