No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    How to speed up a Quasar web page with UMD mode?

    Help
    2
    3
    503
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • C
      cst_zf last edited by

      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>
      
      1 Reply Last reply Reply Quote 0
      • qyloxe
        qyloxe last edited by qyloxe

        not exactly speed up tip, but the v-cloak directive may be helpful (and it is of course working with Quasar):

        https://vuejs.org/v2/api/#v-cloak

        C 1 Reply Last reply Reply Quote 0
        • C
          cst_zf @qyloxe last edited by

          @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!

          1 Reply Last reply Reply Quote 0
          • First post
            Last post