Vue performance plugin

What does this MR do?

Introduces a custom Vue plugin that captures and measures performance of the specified Vue components on a view using User Timing API.

How to use it?

1. Import the plugin:

import PerformancePlugin from '~/performance/vue_performance_plugin';

2. Then… use it before initializing your Vue application 😅

/* eslint-disable @gitlab/require-i18n-strings */
Vue.use(PerformancePlugin, {
  components: [
    'IdeTreeList',
    'FileTree',
    'RepoEditor',
  ]
});
/* eslint-enable @gitlab/require-i18n-strings */

The plugin accepts the list of components performance of which should be measured. The components should be specified by their name option.

⚠ This might require the authors to explicitly set this option on the needed components as most components in the codebase don't have this option set at the moment:

export default {
  name: 'IdeTreeList',
  components: {
    ...
  ...
}

The plugin will capture and store:

• start mark for when the component has been initialized (in beforeCreate() hook)
• end mark of the component when it has been rendered (next animation frame after nextTick in mounted() hook)
• measure duration between the two marks above.

How to access the stored measurements?

1. Performance Bar. If you have it enabled (P + B keycombo), you will see the metrics output in your DevTools' console:

2. "Performance" tab of the DevTools. You can get the measurements (not the marks, though) in this tab when profiling performance

3. DevTools' Console. You can simply query for the entries:

marks	measures

Does this MR meet the acceptance criteria?

Conformity

• [ ] Changelog entry This is a the developer-facing change, hence no Changelog entry has been provided.
• [ ] Documentation (if required) It will be part of the larger documentation effort in Write documentation on using User Timing API
• Code review guidelines
• Merge request performance guidelines
• Style guides
• Database guides
• Separation of EE specific content

Availability and Testing

• Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process.
• Tested in all supported browsers
• Informed Infrastructure department of a default or new setting change, if applicable per definition of done