Measure runtime performance in Vue.js apps

Alex Jover Morales

Alex Jover Morales

Jan 20, 2019
2 min read
Share on Twitter or LinkedIn

In the last tip we talked about how to improve performance in large lists. But still we haven't measure how much it really improved.

We can do so by using the Performance tab in Chrome DevTools. But in order to have accurate data, we must activate performance mode on our Vue app.

We can do that by setting the global, in our main.js file or in a plugin in the case of Nuxt:

Vue.config.performance = true;

Or if you have your NODE_ENV env variable set correctly, you could use it to set it in non-production environments:

const isDev = process.env.NODE_ENV !== "production";
Vue.config.performance = isDev;

That will activate the User Timing API that Vue uses internally to mark the components performance.

From the last tip, I've created this codesandbox. Open it and hit the reload button from the performance tab on Chrome DevTools:

That will record the page load performance. And thanks to the Vue.config.performance setting that you can see set on main.js you'll be able to see a User Timing section on the profiling:

In there, you'll find 3 metrics:

  • Init: time it takes to create the component instance
  • Render: time to create the VDom structure
  • Patch: time to apply the VDom structure to the real DOM

Back to the curiosity, the results of the previous tip are the following: the normal component takes 417ms to initalize:

While the non-reactive one using Object.freeze takes 3.9ms:

Of course this can vary a little from run to run, but still the difference must be quite huge. Since the reactivity issue happens when the component is created, you'll see that difference in the init part of the Reactive and NoReactive components.

That's it!

Remember you can read this tip online (with copy/pasteable code) and please share VueDose with all your colleagues if you liked it!

See you next week.

Don't miss out anything about Vue, your favourite framework.

Subscribe to receive all the articles we publish in a concise format, perfect for busy devs.

Related Articles

Achieve Max Performance loading your images with v-lazy-image

Don't you know what to do to improve your web performance? Learn Progressive Image Loading, a technique used by Spotify, Medium and Netflix.

Alex Jover Morales

Alex Jover Morales

Aug 30, 2021

Use Responsive Images with v-lazy-image

Is Web Performance a priority for you? Then read this article! You'll learn how to lazy load images with srcset and picture tag using v-lazy-image.

Alex Jover Morales

Alex Jover Morales

Aug 23, 2021

Use Web Workers in your Vue.js Components for Max Performance

Learn how to get up to 20x performance improvement of Vue.js components that rely on heavy tasks so they render and load faster

Alex Jover Morales

Alex Jover Morales

Mar 31, 2020

Sponsors

VueDose is proudly supported by its sponsors. If you enjoy it, consider supporting it to ensure the project maintainability.

Silver
Learning Partner