How to speed up a Quasar web page with UMD mode?
-
I find my UMD is very slow to show.
The rendering process will end in about 1 second. So I can see the original html page with an argly format.
How can I speed up the rendering process?<!DOCTYPE html> <html lang="zh-hans"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width"> <title>Title</title> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css"> <link href="https://cdn.jsdelivr.net/npm/animate.css@^3.5.2/animate.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/quasar@^1.4.0/dist/quasar.min.css" rel="stylesheet" type="text/css"> </head> <body> <div id="q-app"> <q-layout view="lHh Lpr fff"> <q-header elevated class="glossy"> <q-toolbar> <q-toolbar-title class="text-center"> Login </q-toolbar-title> </q-toolbar> </q-header> <q-page-container> <q-page padding> <div class="row flex-center q-pa-md"> <q-form class="q-gutter-xl" style="min-width: 400px"> <q-input outlined v-model="email" label="Input Email" :rules="[ val => val && val.match(/^[a-zA-Z0-9_.+-]+@example\.com+$/g) || 'Please input a correct email address']"> <template v-slot:after> <q-btn round icon="send" type="submit" color="primary" @click="onSubmitEmail" /> </template> </q-input> </q-form> </div> <div class="row flex-center q-pa-md"> <q-form class="q-gutter-xl" style="min-width: 400px"> <q-input outlined v-model="code" label="Input Code"> <template v-slot:after> <q-btn round icon="send" type="submit" color="primary" @click="onSubmitCode" /> </template> </q-input> </q-form> </div> </q-page> </q-page-container> </q-layout> </div> <script src="https://cdn.jsdelivr.net/npm/quasar@^1.4.0/dist/quasar.ie.polyfills.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/quasar@^1.4.0/dist/quasar.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/quasar@^1.4.0/dist/lang/zh-hans.umd.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> Quasar.lang.set(Quasar.lang.zhHans) Vue.prototype.$axios = axios new Vue({ el: '#q-app', data: function () { return { version: Quasar.version, email: '@example.com', code: '' } }, methods:{ onSubmitEmail () { }, onSubmitCode () { } } }) </script> </body> </html>
-
not exactly speed up tip, but the v-cloak directive may be helpful (and it is of course working with Quasar):
-
@qyloxe Thanks, this is what I want!
I tried to find if there is a splash screen component but found nothing.
v-cloak will do it! Thank u very much!