Lazy-load performance bar UI48673-lazy-load-performance-bar-in-frontend

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.

4 files changed, 115 insertions, 89 deletions

diff --git a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
index b76965f280b..0fdb0a080cf 100644
--- a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
+++ b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
@@ -1,13 +1,10 @@
 <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;
     },
diff --git a/app/assets/javascripts/performance_bar/index.js b/app/assets/javascripts/performance_bar/index.js
index 4a98aed7679..41880d27516 100644
--- a/app/assets/javascripts/performance_bar/index.js
+++ b/app/assets/javascripts/performance_bar/index.js
@@ -1,12 +1,13 @@
 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: {
diff --git a/spec/javascripts/performance_bar/components/performance_bar_app_spec.js b/spec/javascripts/performance_bar/components/performance_bar_app_spec.js
index 9ab9ab1c9f4..7926db44429 100644
--- a/spec/javascripts/performance_bar/components/performance_bar_app_spec.js
+++ b/spec/javascripts/performance_bar/components/performance_bar_app_spec.js
@@ -1,39 +1,15 @@
 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',
-      );
-    });
-  });
 });
diff --git a/spec/javascripts/performance_bar/index_spec.js b/spec/javascripts/performance_bar/index_spec.js
new file mode 100644
index 00000000000..1784bd64adb
--- /dev/null
+++ b/spec/javascripts/performance_bar/index_spec.js
@@ -0,0 +1,83 @@
+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',
+      );
+    });
+  });
+});