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>