Defer loading terminal modules in IDE

This helps optimize the IDE page bundle

app/assets/javascripts/ide/components/ide.vue

@@ -10,17 +10,13 @@ import {
   WEBIDE_MEASURE_BEFORE_VUE,
 } from '~/performance/constants';
 import { performanceMarkAndMeasure } from '~/performance/utils';
-import FindFile from '~/vue_shared/components/file_finder/index.vue';
 import { modalTypes } from '../constants';
 import eventHub from '../eventhub';
 import IdeSidebar from './ide_side_bar.vue';
-import RepoEditor from './repo_editor.vue';
 import ErrorMessage from './error_message.vue';
 import CommitEditorHeader from './commit_sidebar/editor_header.vue';
 import RepoTabs from './repo_tabs.vue';
 import IdeStatusBar from './ide_status_bar.vue';
-import RightPane from './panes/right.vue';
-import NewModal from './new_dropdown/modal.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 import { measurePerformance } from '../utils';
@@ -36,16 +32,17 @@ eventHub.$on(WEBIDE_MEASURE_FILE_AFTER_INTERACTION, () =>
 export default {
   components: {
     IdeSidebar,
-    RepoEditor,
     ErrorMessage,
     GlButton,
     GlLoadingIcon,
     CommitEditorHeader,
     RepoTabs,
     IdeStatusBar,
-    FindFile,
-    RightPane,
-    NewModal,
+    RepoEditor: () => import(/* webpackChunkName: 'ide_runtime' */ './repo_editor.vue'),
+    FindFile: () =>
+      import(/* webpackChunkName: 'ide_runtime' */ '~/vue_shared/components/file_finder/index.vue'),
+    RightPane: () => import(/* webpackChunkName: 'ide_runtime' */ './panes/right.vue'),
+    NewModal: () => import(/* webpackChunkName: 'ide_runtime' */ './new_dropdown/modal.vue'),
   },
   mixins: [glFeatureFlagsMixin()],
   data() {

app/assets/javascripts/ide/components/ide_side_bar.vue

@@ -14,8 +14,10 @@ export default {
     ResizablePanel,
     ActivityBar,
     IdeTree,
-    [leftSidebarViews.review.name]: () => import('./ide_review.vue'),
-    [leftSidebarViews.commit.name]: () => import('./repo_commit_section.vue'),
+    [leftSidebarViews.review.name]: () =>
+      import(/* webpackChunkName: 'ide_runtime' */ './ide_review.vue'),
+    [leftSidebarViews.commit.name]: () =>
+      import(/* webpackChunkName: 'ide_runtime' */ './repo_commit_section.vue'),
     CommitForm,
     IdeProjectHeader,
   },

app/assets/javascripts/ide/components/terminal/view.vue

 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
 import EmptyState from './empty_state.vue';
-import TerminalSession from './session.vue';
 
 export default {
   components: {
     EmptyState,
-    TerminalSession,
+    TerminalSession: () => import(/* webpackChunkName: 'ide_terminal' */ './session.vue'),
   },
   computed: {
     ...mapState('terminal', ['isShowSplash', 'paths']),

spec/frontend/ide/components/terminal/view_spec.js

 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
 import { TEST_HOST } from 'spec/test_constants';
+import waitForPromises from 'helpers/wait_for_promises';
 import TerminalEmptyState from '~/ide/components/terminal/empty_state.vue';
 import TerminalView from '~/ide/components/terminal/view.vue';
 import TerminalSession from '~/ide/components/terminal/session.vue';
@@ -17,7 +18,7 @@ describe('IDE TerminalView', () => {
   let getters;
   let wrapper;
 
-  const factory = () => {
+  const factory = async () => {
     const store = new Vuex.Store({
       modules: {
         terminal: {
@@ -30,6 +31,9 @@ describe('IDE TerminalView', () => {
     });
 
     wrapper = shallowMount(TerminalView, { localVue, store });
+
+    // Uses deferred components, so wait for those to load...
+    await waitForPromises();
   };
 
   beforeEach(() => {
@@ -59,8 +63,8 @@ describe('IDE TerminalView', () => {
     wrapper.destroy();
   });
 
-  it('renders empty state', () => {
-    factory();
+  it('renders empty state', async () => {
+    await factory();
 
     expect(wrapper.find(TerminalEmptyState).props()).toEqual({
       helpPath: TEST_HELP_PATH,
@@ -69,8 +73,8 @@ describe('IDE TerminalView', () => {
     });
   });
 
-  it('hides splash and starts, when started', () => {
-    factory();
+  it('hides splash and starts, when started', async () => {
+    await factory();
 
     expect(actions.startSession).not.toHaveBeenCalled();
     expect(actions.hideSplash).not.toHaveBeenCalled();
@@ -81,9 +85,9 @@ describe('IDE TerminalView', () => {
     expect(actions.hideSplash).toHaveBeenCalled();
   });
 
-  it('shows Web Terminal when started', () => {
+  it('shows Web Terminal when started', async () => {
     state.isShowSplash = false;
-    factory();
+    await factory();
 
     expect(wrapper.find(TerminalEmptyState).exists()).toBe(false);
     expect(wrapper.find(TerminalSession).exists()).toBe(true);