perf: load app after keycloak authentication

src/app.js

@@ -0,0 +1,111 @@
+import Vue from 'vue'
+
+import 'element-ui/lib/theme-chalk/index.css'
+import './scss/index.scss'
+
+import Element, {
+  MessageBox,
+  InputNumber
+} from 'element-ui'
+
+import App from './App.vue'
+import store from './store'
+import router from './router'
+
+import './icons'
+import './components'
+import './permission'
+
+import {
+  showLoading,
+  closeLoading
+} from '@/utils/pop'
+
+export default async function startApp (keycloak, auth) {
+  console.log('app')
+  console.time('app')
+
+  document.body.setAttribute('version', __VERSION__)
+  if (auth) {
+    refreshKeycloak(keycloak)
+  }
+
+  InputNumber.methods.handleInputChange = function (value) {
+    const newVal = value === '' ? this.min === -Infinity ? void 0 : this.min : Number(value)
+    if (!isNaN(newVal) || value === '') {
+      this.setCurrentValue(newVal)
+    }
+    this.userInput = null
+  }
+  Vue.use(Element)
+
+  Vue.config.productionTip = false
+  Vue.config.errorHandler = err => {
+    closeLoading()
+    throw (err || 'custom reject')
+  }
+
+  Vue.prototype.__PLACEHOLDER__ = __PLACEHOLDER__
+  Vue.prototype.__WECHAT__ = __WECHAT__
+
+  Vue.prototype.$keycloak = keycloak
+  Vue.prototype.$showLoading = showLoading
+  Vue.prototype.$closeLoading = closeLoading
+  Vue.prototype.$designProgram = function (id) {
+    window.open(this.$router.resolve({
+      name: 'program',
+      params: { id }
+    }).href, '_blank')
+  }
+
+  window._AMapSecurityConfig = {
+    securityJsCode: process.env.VUE_APP_GAODE_MAP_JSCODE
+  }
+
+  await store.dispatch('user/login', keycloak)
+  store.dispatch('permission/generateRoutes')
+  router.addRoutes(store.getters.permissionRoutes)
+
+  new Vue({
+    router,
+    store,
+    render: h => h(App)
+  }).$mount('#app')
+
+  console.timeEnd('app')
+}
+
+function refreshKeycloak (keycloak) {
+  // Token Refresh
+  setInterval(() => {
+    keycloak.updateToken(70).then(refreshed => {
+      if (refreshed) {
+        store.dispatch('user/refresh', keycloak).catch(() => {
+          try {
+            MessageBox.close()
+          } finally {
+            store.dispatch('user/clearToken')
+            MessageBox.confirm(
+              '账号信息发生变化，请重新登录',
+              '系统提示',
+              {
+                type: 'warning',
+                confirmButtonText: '重新登录',
+                center: true,
+                showClose: false,
+                showCancelButton: false,
+                closeOnClickModal: false,
+                closeOnPressEscape: false,
+                closeOnHashChange: false
+              }
+            ).then(() => {
+              store.dispatch('user/logout')
+            })
+          }
+        })
+      } else {
+        console.warn(`Token not refreshed, valid for ${Math.round(keycloak.tokenParsed.exp + keycloak.timeSkew - new Date().getTime() / 1000)} seconds`)
+      }
+    }).catch(e => console.error('Failed to refresh token', e))
+  }, 6000)
+}

src/main.js

@@ -1,26 +1,6 @@
+console.log('keycloak')
+console.time('keycloak')
 import Keycloak from 'keycloak-js'
-import Vue from 'vue'
-
-import 'element-ui/lib/theme-chalk/index.css'
-import './scss/index.scss'
-
-import Element, {
-  MessageBox,
-  InputNumber
-} from 'element-ui'
-
-import App from './App'
-import store from './store'
-import router from './router'
-
-import './icons'
-import './components'
-import './permission'
-
-import {
-  showLoading,
-  closeLoading
-} from '@/utils/pop'
 
 const initOptions = {
   url: process.env.VUE_APP_KEYCLOAK_OPTIONS_URL,
@@ -36,93 +16,21 @@ keycloak
   .then(auth => {
     if (!auth) {
       console.error('Authenticated Failed[403]')
-      return
+      return false
     }
 
-    console.log(keycloak)
-
-    refreshKeycloak()
+    return true
   })
   .catch(e => console.error('Authenticated Failed', e))
-  .finally(startApp)
-
-function refreshKeycloak () {
-  // Token Refresh
-  setInterval(() => {
-    keycloak.updateToken(70).then(refreshed => {
-      if (refreshed) {
-        store.dispatch('user/refresh', keycloak).catch(() => {
-          try {
-            MessageBox.close()
-          } finally {
-            store.dispatch('user/clearToken')
-            MessageBox.confirm(
-              '账号信息发生变化，请重新登录',
-              '系统提示',
-              {
-                type: 'warning',
-                confirmButtonText: '重新登录',
-                center: true,
-                showClose: false,
-                showCancelButton: false,
-                closeOnClickModal: false,
-                closeOnPressEscape: false,
-                closeOnHashChange: false
-              }
-            ).then(() => {
-              store.dispatch('user/logout')
-            })
-          }
-        })
-      } else {
-        console.warn(`Token not refreshed, valid for ${Math.round(keycloak.tokenParsed.exp + keycloak.timeSkew - new Date().getTime() / 1000)} seconds`)
-      }
-    }).catch(e => console.error('Failed to refresh token', e))
-  }, 6000)
-}
-
-async function startApp () {
-  document.body.setAttribute('version', __VERSION__)
-
-  InputNumber.methods.handleInputChange = function (value) {
-    const newVal = value === '' ? this.min === -Infinity ? void 0 : this.min : Number(value)
-    if (!isNaN(newVal) || value === '') {
-      this.setCurrentValue(newVal)
-    }
-    this.userInput = null
-  }
-  Vue.use(Element)
-
-  Vue.config.productionTip = false
-  Vue.config.errorHandler = err => {
-    closeLoading()
-    throw (err || 'custom reject')
-  }
-
-  Vue.prototype.__PLACEHOLDER__ = __PLACEHOLDER__
-  Vue.prototype.__WECHAT__ = __WECHAT__
-
-  Vue.prototype.$keycloak = keycloak
-  Vue.prototype.$showLoading = showLoading
-  Vue.prototype.$closeLoading = closeLoading
-  Vue.prototype.$designProgram = function (id) {
-    window.open(this.$router.resolve({
-      name: 'program',
-      params: { id }
-    }).href, '_blank')
-  }
-
-  window._AMapSecurityConfig = {
-    securityJsCode: process.env.VUE_APP_GAODE_MAP_JSCODE
-  }
-
-  await store.dispatch('user/login', keycloak)
-  store.dispatch('permission/generateRoutes')
-  router.addRoutes(store.getters.permissionRoutes)
-
-  new Vue({
-    router,
-    store,
-    render: h => h(App)
-  }).$mount('#app')
+  .then(startApp)
+
+function startApp (auth) {
+  console.timeEnd('keycloak')
+  console.log(keycloak, auth ? 'success' : 'fail')
+  console.log('load app')
+  console.time('load app')
+  import('@/app').then(module => {
+    console.timeEnd('load app')
+    module.default(keycloak, auth)
+  })
 }