Measure your Vue application performance in a standard and consistent way.

Previously we have seen how we can quickly measure performance in Javascript. How about Vue? Vue is the right mix of UI and business logic, and cannot be tested with standard back-end script execution speed. On the other hand, standard UI testing tools may prove to be a bit of an overkill due to the effort required to develop and maintain them.

Browser developer tools solve this problem to a large extent and help measure the application load times during development. Vue provides a standard mechanism to level-up this performance measurement.

Start using Vue’s performance measurement technique in just two steps.

Step 1: Set a variable

Set following value globally in your Vue app.

1
2

// main.js
Vue.config.performance = true;

Just remove the parameter from production code. Alternatively, you can set the value so that it turns itself off in production.

1

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

Step 2: Use developer tools

Open Developer Tools, and go to Performance tab. Click on “Start Profiling and reload page” (or hit Ctrl + Shift + E). You will see a new section here called User Timing in the performance tab, which should give you a clearer picture of your UI performance.