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, 8 insertions, 4 deletions

diff --git a/app/assets/javascripts/issuable/auto_width_dropdown_select.js b/app/assets/javascripts/issuable/auto_width_dropdown_select.js
index 612c524ca1c..e0fb58ef195 100644
--- a/app/assets/javascripts/issuable/auto_width_dropdown_select.js
+++ b/app/assets/javascripts/issuable/auto_width_dropdown_select.js
@@ -11,10 +11,14 @@ class AutoWidthDropdownSelect {
 
   init() {
     const { dropdownClass } = this;
-    this.$selectElement.select2({
-      dropdownCssClass: dropdownClass,
-      ...AutoWidthDropdownSelect.selectOptions(this.dropdownClass),
-    });
+    import(/* webpackChunkName: 'select2' */ 'select2/select2')
+      .then(() => {
+        this.$selectElement.select2({
+          dropdownCssClass: dropdownClass,
+          ...AutoWidthDropdownSelect.selectOptions(this.dropdownClass),
+        });
+      })
+      .catch(() => {});
 
     return this;
   }