Wraps Select 2 Import into its own webpack bundle

Wraps all imports for select 2 to deferred imports,
especially in the main.js we are actually checking if there 
is any select 2 element on the page or not.

1 files changed, 33 insertions, 29 deletions

diff --git a/app/assets/javascripts/issuable_form.js b/app/assets/javascripts/issuable_form.js
index c81a2230310..4d2533d01f1 100644
--- a/app/assets/javascripts/issuable_form.js
+++ b/app/assets/javascripts/issuable_form.js
@@ -120,35 +120,39 @@ export default class IssuableForm {
   }
 
   initTargetBranchDropdown() {
-    this.$targetBranchSelect.select2({
-      ...AutoWidthDropdownSelect.selectOptions('js-target-branch-select'),
-      ajax: {
-        url: this.$targetBranchSelect.data('endpoint'),
-        dataType: 'JSON',
-        quietMillis: 250,
-        data(search) {
-          return {
-            search,
-          };
-        },
-        results(data) {
-          return {
-            // `data` keys are translated so we can't just access them with a string based key
-            results: data[Object.keys(data)[0]].map(name => ({
-              id: name,
-              text: name,
-            })),
-          };
-        },
-      },
-      initSelection(el, callback) {
-        const val = el.val();
-
-        callback({
-          id: val,
-          text: val,
+    import(/* webpackChunkName: 'select2' */ 'select2/select2')
+      .then(() => {
+        this.$targetBranchSelect.select2({
+          ...AutoWidthDropdownSelect.selectOptions('js-target-branch-select'),
+          ajax: {
+            url: this.$targetBranchSelect.data('endpoint'),
+            dataType: 'JSON',
+            quietMillis: 250,
+            data(search) {
+              return {
+                search,
+              };
+            },
+            results(data) {
+              return {
+                // `data` keys are translated so we can't just access them with a string based key
+                results: data[Object.keys(data)[0]].map(name => ({
+                  id: name,
+                  text: name,
+                })),
+              };
+            },
+          },
+          initSelection(el, callback) {
+            const val = el.val();
+
+            callback({
+              id: val,
+              text: val,
+            });
+          },
         });
-      },
-    });
+      })
+      .catch(() => {});
   }
 }