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.

app/assets/javascripts/commons/jquery.js

@@ -7,4 +7,3 @@ import 'vendor/jquery.caret';
 import 'vendor/jquery.atwho';
 import 'vendor/jquery.scrollTo';
 import 'jquery.waitforimages';
-import 'select2/select2';

app/assets/javascripts/groups_select.js

@@ -4,6 +4,8 @@ import Api from './api';
 import { normalizeHeaders } from './lib/utils/common_utils';
 
 export default function groupsSelect() {
+  import(/* webpackChunkName: 'select2' */ 'select2/select2')
+    .then(() => {
       // Needs to be accessible in rspec
       window.GROUP_SELECT_PER_PAGE = 20;
       $('.ajax-groups-select').each(function setAjaxGroupsSelect2() {
@@ -93,4 +95,6 @@ export default function groupsSelect() {
           dropdown.style.height = `${Math.floor(dropdown.scrollHeight)}px`;
         });
       });
+    })
+    .catch(() => {});
 }

app/assets/javascripts/issuable/auto_width_dropdown_select.js

@@ -11,10 +11,14 @@ class AutoWidthDropdownSelect {
 
   init() {
     const { dropdownClass } = this;
+    import(/* webpackChunkName: 'select2' */ 'select2/select2')
+      .then(() => {
         this.$selectElement.select2({
           dropdownCssClass: dropdownClass,
           ...AutoWidthDropdownSelect.selectOptions(this.dropdownClass),
         });
+      })
+      .catch(() => {});
 
     return this;
   }

app/assets/javascripts/issuable_context.js

@@ -7,10 +7,14 @@ export default class IssuableContext {
   constructor(currentUser) {
     this.userSelect = new UsersSelect(currentUser);
 
+    import(/* webpackChunkName: 'select2' */ 'select2/select2')
+      .then(() => {
         $('select.select2').select2({
           width: 'resolve',
           dropdownAutoWidth: true,
         });
+      })
+      .catch(() => {});
 
     $('.issuable-sidebar .inline-update').on('change', 'select', function onClickSelect() {
       return $(this).submit();

app/assets/javascripts/issuable_form.js

@@ -120,6 +120,8 @@ export default class IssuableForm {
   }
 
   initTargetBranchDropdown() {
+    import(/* webpackChunkName: 'select2' */ 'select2/select2')
+      .then(() => {
         this.$targetBranchSelect.select2({
           ...AutoWidthDropdownSelect.selectOptions('js-target-branch-select'),
           ajax: {
@@ -150,5 +152,7 @@ export default class IssuableForm {
             });
           },
         });
+      })
+      .catch(() => {});
   }
 }

app/assets/javascripts/main.js

@@ -100,6 +100,9 @@ function deferredInitialisation() {
   });
 
   // Initialize select2 selects
+  if ($('select.select2').length) {
+    import(/* webpackChunkName: 'select2' */ 'select2/select2')
+      .then(() => {
         $('select.select2').select2({
           width: 'resolve',
           dropdownAutoWidth: true,
@@ -112,6 +115,9 @@ function deferredInitialisation() {
             $(':focus').blur();
           }, 1);
         });
+      })
+      .catch(() => {});
+  }
 
   // Initialize tooltips
   $body.tooltip({

app/assets/javascripts/project_select.js

@@ -5,6 +5,8 @@ import Api from './api';
 import ProjectSelectComboButton from './project_select_combo_button';
 
 export default function projectSelect() {
+  import(/* webpackChunkName: 'select2' */ 'select2/select2')
+    .then(() => {
       $('.ajax-project-select').each(function(i, select) {
         var placeholder;
         const simpleFilter = $(select).data('simpleFilter') || false;
@@ -98,4 +100,6 @@ export default function projectSelect() {
         if (simpleFilter) return select;
         return new ProjectSelectComboButton(select);
       });
+    })
+    .catch(() => {});
 }

app/assets/javascripts/project_select_combo_button.js

@@ -44,9 +44,13 @@ export default class ProjectSelectComboButton {
 
   // eslint-disable-next-line class-methods-use-this
   openDropdown(event) {
+    import(/* webpackChunkName: 'select2' */ 'select2/select2')
+      .then(() => {
         $(event.currentTarget)
           .siblings('.project-item-select')
           .select2('open');
+      })
+      .catch(() => {});
   }
 
   selectProject() {

app/assets/javascripts/users_select.js

@@ -579,6 +579,8 @@ function UsersSelect(currentUser, els, options = {}) {
       };
     })(this),
   );
+  import(/* webpackChunkName: 'select2' */ 'select2/select2')
+    .then(() => {
       $('.ajax-users-select').each(
         (function(_this) {
           return function(i, select) {
@@ -637,7 +639,11 @@ function UsersSelect(currentUser, els, options = {}) {
                       data.results.unshift(anyUser);
                     }
                   }
-              if (showEmailUser && data.results.length === 0 && query.term.match(/^[^@]+@[^@]+$/)) {
+                  if (
+                    showEmailUser &&
+                    data.results.length === 0 &&
+                    query.term.match(/^[^@]+@[^@]+$/)
+                  ) {
                     var trimmed = query.term.trim();
                     emailUser = {
                       name: 'Invite "' + trimmed + '" by email',
@@ -674,6 +680,8 @@ function UsersSelect(currentUser, els, options = {}) {
           };
         })(this),
       );
+    })
+    .catch(() => {});
 }
 
 UsersSelect.prototype.initSelection = function(element, callback) {