Lazy-load performance bar UI

We need to eagerly load the performance bar wrapper component
(`performance_bar/index.js`) when the page is loaded and the container element
is present, to ensure that we register the interceptor early enough in the
page's lifecycle.

However, we don't need to load the UI at that point. Not doing so means that we
can let Webpack extract the UI (`performance_bar/components/*`) into its own
chunk, so users who don't see the performance bar don't have to load too much
unnecessary JavaScript.

app/assets/javascripts/performance_bar/components/performance_bar_app.vue

 <script>
 import $ from 'jquery';
 
-import PerformanceBarService from '../services/performance_bar_service';
 import detailedMetric from './detailed_metric.vue';
 import requestSelector from './request_selector.vue';
 import simpleMetric from './simple_metric.vue';
 
-import Flash from '../../flash';
-
 export default {
   components: {
     detailedMetric,
@@ -69,37 +66,13 @@ export default {
     },
   },
   mounted() {
-    this.interceptor = PerformanceBarService.registerInterceptor(
-      this.peekUrl,
-      this.loadRequestDetails,
-    );
-
-    this.loadRequestDetails(this.requestId, window.location.href);
     this.currentRequest = this.requestId;
 
     if (this.lineProfileModal.length) {
       this.lineProfileModal.modal('toggle');
     }
   },
-  beforeDestroy() {
-    PerformanceBarService.removeInterceptor(this.interceptor);
-  },
   methods: {
-    loadRequestDetails(requestId, requestUrl) {
-      if (!this.store.canTrackRequest(requestUrl)) {
-        return;
-      }
-
-      this.store.addRequest(requestId, requestUrl);
-
-      PerformanceBarService.fetchRequestDetails(this.peekUrl, requestId)
-        .then(res => {
-          this.store.addRequestDetails(requestId, res.data.data);
-        })
-        .catch(() =>
-          Flash(`Error getting performance bar results for ${requestId}`),
-        );
-    },
     changeCurrentRequest(newRequestId) {
       this.currentRequest = newRequestId;
     },

app/assets/javascripts/performance_bar/index.js

 import Vue from 'vue';
-import performanceBarApp from './components/performance_bar_app.vue';
+import Flash from '../flash';
+import PerformanceBarService from './services/performance_bar_service';
 import PerformanceBarStore from './stores/performance_bar_store';
 
 export default ({ container }) =>
   new Vue({
     el: container,
     components: {
-      performanceBarApp,
+      performanceBarApp: () => import('./components/performance_bar_app.vue'),
     },
     data() {
       const performanceBarData = document.querySelector(this.$options.el)
@@ -21,6 +22,34 @@ export default ({ container }) =>
         profileUrl: performanceBarData.profileUrl,
       };
     },
+    mounted() {
+      this.interceptor = PerformanceBarService.registerInterceptor(
+        this.peekUrl,
+        this.loadRequestDetails,
+      );
+
+      this.loadRequestDetails(this.requestId, window.location.href);
+    },
+    beforeDestroy() {
+      PerformanceBarService.removeInterceptor(this.interceptor);
+    },
+    methods: {
+      loadRequestDetails(requestId, requestUrl) {
+        if (!this.store.canTrackRequest(requestUrl)) {
+          return;
+        }
+
+        this.store.addRequest(requestId, requestUrl);
+
+        PerformanceBarService.fetchRequestDetails(this.peekUrl, requestId)
+          .then(res => {
+            this.store.addRequestDetails(requestId, res.data.data);
+          })
+          .catch(() =>
+            Flash(`Error getting performance bar results for ${requestId}`),
+          );
+      },
+    },
     render(createElement) {
       return createElement('performance-bar-app', {
         props: {

spec/javascripts/performance_bar/components/performance_bar_app_spec.js

 import Vue from 'vue';
-import axios from '~/lib/utils/axios_utils';
 import performanceBarApp from '~/performance_bar/components/performance_bar_app.vue';
-import PerformanceBarService from '~/performance_bar/services/performance_bar_service';
 import PerformanceBarStore from '~/performance_bar/stores/performance_bar_store';
 
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import MockAdapter from 'axios-mock-adapter';
 
-describe('performance bar', () => {
-  let mock;
+describe('performance bar app', () => {
   let vm;
 
   beforeEach(() => {
     const store = new PerformanceBarStore();
 
-    mock = new MockAdapter(axios);
-
-    mock.onGet('/-/peek/results').reply(
-      200,
-      {
-        data: {
-          gc: {
-            invokes: 0,
-            invoke_time: '0.00',
-            use_size: 0,
-            total_size: 0,
-            total_object: 0,
-            gc_time: '0.00',
-          },
-          host: { hostname: 'web-01' },
-        },
-      },
-      {},
-    );
-
     vm = mountComponent(Vue.extend(performanceBarApp), {
       store,
       env: 'development',
@@ -45,44 +21,9 @@ describe('performance bar', () => {
 
   afterEach(() => {
     vm.$destroy();
-    mock.restore();
   });
 
   it('sets the class to match the environment', () => {
     expect(vm.$el.getAttribute('class')).toContain('development');
   });
-
-  describe('loadRequestDetails', () => {
-    beforeEach(() => {
-      spyOn(vm.store, 'addRequest').and.callThrough();
-    });
-
-    it('does nothing if the request cannot be tracked', () => {
-      spyOn(vm.store, 'canTrackRequest').and.callFake(() => false);
-
-      vm.loadRequestDetails('123', 'https://gitlab.com/');
-
-      expect(vm.store.addRequest).not.toHaveBeenCalled();
-    });
-
-    it('adds the request immediately', () => {
-      vm.loadRequestDetails('123', 'https://gitlab.com/');
-
-      expect(vm.store.addRequest).toHaveBeenCalledWith(
-        '123',
-        'https://gitlab.com/',
-      );
-    });
-
-    it('makes an HTTP request for the request details', () => {
-      spyOn(PerformanceBarService, 'fetchRequestDetails').and.callThrough();
-
-      vm.loadRequestDetails('456', 'https://gitlab.com/');
-
-      expect(PerformanceBarService.fetchRequestDetails).toHaveBeenCalledWith(
-        '/-/peek/results',
-        '456',
-      );
-    });
-  });
 });

spec/javascripts/performance_bar/index_spec.js

+import axios from '~/lib/utils/axios_utils';
+import performanceBar from '~/performance_bar';
+import PerformanceBarService from '~/performance_bar/services/performance_bar_service';
+
+import MockAdapter from 'axios-mock-adapter';
+
+describe('performance bar wrapper', () => {
+  let mock;
+  let vm;
+
+  beforeEach(() => {
+    const peekWrapper = document.createElement('div');
+
+    peekWrapper.setAttribute('id', 'js-peek');
+    peekWrapper.setAttribute('data-env', 'development');
+    peekWrapper.setAttribute('data-request-id', '123');
+    peekWrapper.setAttribute('data-peek-url', '/-/peek/results');
+    peekWrapper.setAttribute('data-profile-url', '?lineprofiler=true');
+
+    document.body.appendChild(peekWrapper);
+
+    mock = new MockAdapter(axios);
+
+    mock.onGet('/-/peek/results').reply(
+      200,
+      {
+        data: {
+          gc: {
+            invokes: 0,
+            invoke_time: '0.00',
+            use_size: 0,
+            total_size: 0,
+            total_object: 0,
+            gc_time: '0.00',
+          },
+          host: { hostname: 'web-01' },
+        },
+      },
+      {},
+    );
+
+    vm = performanceBar({ container: '#js-peek' });
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+    mock.restore();
+  });
+
+  describe('loadRequestDetails', () => {
+    beforeEach(() => {
+      spyOn(vm.store, 'addRequest').and.callThrough();
+    });
+
+    it('does nothing if the request cannot be tracked', () => {
+      spyOn(vm.store, 'canTrackRequest').and.callFake(() => false);
+
+      vm.loadRequestDetails('123', 'https://gitlab.com/');
+
+      expect(vm.store.addRequest).not.toHaveBeenCalled();
+    });
+
+    it('adds the request immediately', () => {
+      vm.loadRequestDetails('123', 'https://gitlab.com/');
+
+      expect(vm.store.addRequest).toHaveBeenCalledWith(
+        '123',
+        'https://gitlab.com/',
+      );
+    });
+
+    it('makes an HTTP request for the request details', () => {
+      spyOn(PerformanceBarService, 'fetchRequestDetails').and.callThrough();
+
+      vm.loadRequestDetails('456', 'https://gitlab.com/');
+
+      expect(PerformanceBarService.fetchRequestDetails).toHaveBeenCalledWith(
+        '/-/peek/results',
+        '456',
+      );
+    });
+  });
+});