[Vuejs]-VueJS Performance Questions

0👍

The first thing that I notice is that you are doing a route.push on App created hook, that means that the router already solve the first route (probably ‘/’) and after that you are adding another route (but not immediately) and then the router is solving that new route.

For a faster boot why don’t you add a redirect to the route:

//...routes
{
 path: '/',
 redirect: {name: 'Responses'}
}

If you have the opportunity to change to Vue3 then maybe you could also perceive a performance boost since Vue2 has an always present GlobalAPI and Vue3 is doing a tree shaking and ignoring the unused stuff after building.

Note: Make sure you are testing it with a production environment, because if you are using the vue-cli to serve the content then the startup will include a lot of overhead

0👍

There is much more what happens between created and mounted hooks – it’s not just the code in all created hooks what is running. Check the Vue component lifecycle

As you are using Vue SFC’c and probably Webpack, template compilation is out of the question but still, after created Vue is executing render functions of all components (producing VDOM) and creating real DOM elements based on VDOM (rendering whole app). So depending on number of components and elements, 150ms is not that bad…

0👍

Thanks guys! Actually the default route is already redirecting to Responses, and removing the push doesn’t change much.

Unfortunately I can’t really migrate to Vue 3 as I rely on dependencies that do not fully support Vue 3 (Vue BS being an important one).

I’m guessing that’s as much as I can do at this point. Just wondering if there’s any way with Vue Cli to open the window browser extension popup immediately and load Vue afterwards (right now, it’s waiting for the whole thing to be loaded and then opens the popup which gives a 300ms delay between the click and the window actually opening).

Leave a comment