How to speed up page change ?

[yamland]

I’m making a SPA which have Twitter like UI.
Now, using <q-tabs>, <q-route-tab> for page change and navigation. (vue router is history mode.)

Problem is slow page change. It takes 1 or 2 seconds. Code is like below.

Second time page change is very fast. because using <keep-alive>. (about 0.5s, including fade transition)
But first time page chage is very slow. ( test local, network enough fast, not use lazy loading)

I think the cause is each page code size are big. Heavy code makes first-time page change rendering slower.
Imagine page change on Twitter app, from time-line page to any user’s page.
Twitter is simple but those code is maybe very heavy because of very rich UI.

If heavy code cause page change slower, What can I do for speed up page change?

Now, I searching the way to pre-rendering other router page on client side. But I can’t find the way yet.
( For example, when you see user’s page, I want to do pre-rendering time-line page in background on client side, like after <keep-alive> . )

Please give me your advice.

// router part
 <keep-alive>
   <router-view />
 </keep-alive>

// tab part
 <q-footer>
   <q-tabs
   >
     <q-route-tab :to="{ name: 'timeline' }" icon="a" />
     <q-route-tab :to="{ name: 'user' }"     icon="b" />
     <q-route-tab :to="{ name: 'message' }"  icon="c" />
   </q-tabs>
 </q-footer>

[yamland]

// Postscript
I thoght about not using vue router and only use <q-tab>.
Maybe It is pre-rendering other tab ?But that way, cons are can’t use router.
So User can’t use URL link lile "twitter.com/user/abc "
So I Search the way can use with <q-route-tab> and router,

[mseremet]

@yamland

I’m also trying to preserve the state of q-route-tabs without reloading them but no luck with vue keep-alive
How do you exactly use the keep-alive. I’m trying to use them inside App.vue which is like this.

<template>
  <div id="q-app">
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>
</template>

[metalsadman]

@mseremet @yamland keep-alive does work with q-router-tab https://codesandbox.io/s/q306jwnjx6. Click “Home” ->click one of the routes-> change some data ->change route -> go back to some route (states were kept).

[yamland]

Hi, @mseremet

I used <q-footer> outside of <keep-alive>.

<my-custom-footer-with-q-footer/>
<keep-alive>
  <router-view />
</keep-alive>

And, I have not find the way to make first time page change faster. (Second time page change is enough fast thanks of keep-alive)
Only Way I know is make code lighter…

[yamland]

Hi, @metalsadman

Thank your reply!!
Sorry to confuse you because my first post describe is wrong.
I used q-router-tab outside of keep-alive. So footer works well.

Problem is very slow page change at first time page change from page A to Page B.
Second time page change is enough fast thanks to keep-alive.
So, I searching the way to pre-rendering other router page on client side. But I can’t find the way yet.
( For example, when you see user’s page, I want to do pre-rendering time-line page in background on client side, like after <keep-alive> . )

But this is not quasar specific problem? So better to ask at stack overflow ?

[Oren]

@yamland Maybe it’s a little bit too late for this topic, but I figured an easy way to “pre-render” pages. Given the fact that /src/App.vue will run only once at the app bootup, we can do a few $router.push in the created hook in /src/App.vue. And because we are using <keep-alive></keep-alive> for router-views, we can keep the rendered pages even if we route back to “/”. So from the view of users, only home screen is shown. Implementation is pretty simple.

created () {
  this.$router.push('page1').then(() => {
    this.$router.push('page2').then(() => {
      this.$router.push('/')
    })
  })
}