Unlock performance tracing in Vue

Step 1…

Add the following snippet to your main.js

Add this one line to your main.js

…and that’s all you have to do!

This will turn on the Vue performance tracing, which uses the User Timing API to track your component’s init, compile, render and patch performance whilst you are in development mode.

View in dev tools

Google Chrome has built in support for the User Timing API and will automatically add this tracing to the visualisations in the Performance tab of your dev tools.

Vue Performance tracing in Chrome dev tools

Understanding the results

The example above shows the load performance of my application. My App.vue has two child components, Expensive and Cheap. Expensive has a taxing Created method and therefore takes much longer to initialise than Cheap. The visualisation indicates this by showing a longer bar for Expensive’s init measurement.

Demo

I have created a demo sandbox with Vue performance tracing enabled so you can get started with tracing the load performance and other common interactions on a live application.

Custom collection

As Vue’s performance tracing uses the common User Timing API, you can also use a PerformaceObserver to fire a callback whenever a performance entry is created by your components.

Collect and handle the performance marks

Summary

I am fairly new to Vue’s performance tracking and used to find debugging performance bottlenecks to be a very long and manual process. Without the kind of insight that this tracing gives us, I found that it was easy to miss-attribute a component’s issue to it’s parent or siblings, but now it is quick and easy to reliably pin point problems.

--

--

Enthusiastic about frontend tech

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Brock Reece

Brock Reece

Enthusiastic about frontend tech