Measure Vue components' performances

Set up Vue Performance plugin to measure sme blob-related
components in the repository browser

app/assets/javascripts/blob/components/blob_content.vue

@@ -6,6 +6,7 @@ import BlobContentError from './blob_content_error.vue';
 import { BLOB_RENDER_EVENT_LOAD, BLOB_RENDER_EVENT_SHOW_SOURCE } from './constants';
 
 export default {
+  name: 'BlobContent',
   components: {
     GlLoadingIcon,
     BlobContentError,

app/assets/javascripts/repository/index.js

@@ -4,6 +4,7 @@ import { parseBoolean } from '~/lib/utils/common_utils';
 import { escapeFileUrl } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
 import initWebIdeLink from '~/pages/projects/shared/web_ide_link';
+import PerformancePlugin from '~/performance/vue_performance_plugin';
 import App from './components/app.vue';
 import Breadcrumbs from './components/breadcrumbs.vue';
 import DirectoryDownloadLinks from './components/directory_download_links.vue';
@@ -17,6 +18,10 @@ import createRouter from './router';
 import { updateFormAction } from './utils/dom';
 import { setTitle } from './utils/title';
 
+Vue.use(PerformancePlugin, {
+  components: ['SimpleViewer', 'BlobContent'],
+});
+
 export default function setupVueRepositoryList() {
   const el = document.getElementById('js-tree-list');
   const { dataset } = el;

app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue

@@ -6,6 +6,7 @@ import { HIGHLIGHT_CLASS_NAME } from './constants';
 import ViewerMixin from './mixins';
 
 export default {
+  name: 'SimpleViewer',
   components: {
     GlIcon,
     EditorLite: () =>