Improved Snippet view performance

- don't load Monaco on the view
- bootstrap Vue as soon as possible and not after DOM ready
- load only the required modules for the Vue view

app/assets/javascripts/snippet/snippet_show.js

-import LineHighlighter from '~/line_highlighter';
-import BlobViewer from '~/blob/viewer';
-import ZenMode from '~/zen_mode';
 import initNotes from '~/init_notes';
-import snippetEmbed from '~/snippet/snippet_embed';
-import { SnippetShowInit } from '~/snippets';
 import loadAwardsHandler from '~/awards_handler';
 
-document.addEventListener('DOMContentLoaded', () => {
-  if (!gon.features.snippetsVue) {
-    new LineHighlighter(); // eslint-disable-line no-new
-    new BlobViewer(); // eslint-disable-line no-new
-    initNotes();
-    new ZenMode(); // eslint-disable-line no-new
-    snippetEmbed();
-  } else {
-    SnippetShowInit();
-    initNotes();
-  }
-  loadAwardsHandler();
-});
+if (!gon.features.snippetsVue) {
+  const LineHighlighterModule = import('~/line_highlighter');
+  const BlobViewerModule = import('~/blob/viewer');
+  const ZenModeModule = import('~/zen_mode');
+  const SnippetEmbedModule = import('~/snippet/snippet_embed');
+
+  Promise.all([LineHighlighterModule, BlobViewerModule, ZenModeModule, SnippetEmbedModule])
+    .then(
+      ([
+        { default: LineHighlighter },
+        { default: BlobViewer },
+        { default: ZenMode },
+        { default: SnippetEmbed },
+      ]) => {
+        new LineHighlighter(); // eslint-disable-line no-new
+        new BlobViewer(); // eslint-disable-line no-new
+        new ZenMode(); // eslint-disable-line no-new
+        SnippetEmbed();
+      },
+    )
+    .catch(() => {});
+} else {
+  import('~/snippets')
+    .then(({ SnippetShowInit }) => {
+      SnippetShowInit();
+    })
+    .catch(() => {});
+}
+initNotes();
+loadAwardsHandler();

app/assets/javascripts/snippets/index.js

@@ -3,8 +3,6 @@ import VueApollo from 'vue-apollo';
 import Translate from '~/vue_shared/translate';
 import createDefaultClient from '~/lib/graphql';
 
-import SnippetsShow from './components/show.vue';
-import SnippetsEdit from './components/edit.vue';
 import { SNIPPET_LEVELS_MAP, SNIPPET_VISIBILITY_PRIVATE } from '~/snippets/constants';
 
 Vue.use(VueApollo);
@@ -48,9 +46,17 @@ function appFactory(el, Component) {
 }
 
 export const SnippetShowInit = () => {
-  appFactory(document.getElementById('js-snippet-view'), SnippetsShow);
+  import('./components/show.vue')
+    .then(({ default: SnippetsShow }) => {
+      appFactory(document.getElementById('js-snippet-view'), SnippetsShow);
+    })
+    .catch(() => {});
 };
 
 export const SnippetEditInit = () => {
-  appFactory(document.getElementById('js-snippet-edit'), SnippetsEdit);
+  import('./components/edit.vue')
+    .then(({ default: SnippetsEdit }) => {
+      appFactory(document.getElementById('js-snippet-edit'), SnippetsEdit);
+    })
+    .catch(() => {});
 };

spec/frontend/snippet/snippet_edit_spec.js

@@ -5,6 +5,7 @@ import initSnippet from '~/snippet/snippet_bundle';
 
 jest.mock('~/snippet/snippet_bundle');
 jest.mock('~/snippets');
+jest.mock('~/gl_form');
 
 describe('Snippet edit form initialization', () => {
   const setFF = flag => {