Merge branch 'commons-chunk-plugin' into 'master'

Use CommonsChunkPlugin to place vendor libraries in cacheable bundles

Closes #25550

See merge request !9647

33 files changed, 135 insertions, 71 deletions

diff --git a/app/assets/javascripts/commons/bootstrap.js b/app/assets/javascripts/commons/bootstrap.js
new file mode 100644
index 00000000000..db0cbfd87c3
--- /dev/null
+++ b/app/assets/javascripts/commons/bootstrap.js
@@ -0,0 +1,10 @@
+import 'jquery';
+
+// bootstrap jQuery plugins
+import 'bootstrap-sass/assets/javascripts/bootstrap/affix';
+import 'bootstrap-sass/assets/javascripts/bootstrap/alert';
+import 'bootstrap-sass/assets/javascripts/bootstrap/dropdown';
+import 'bootstrap-sass/assets/javascripts/bootstrap/modal';
+import 'bootstrap-sass/assets/javascripts/bootstrap/tab';
+import 'bootstrap-sass/assets/javascripts/bootstrap/transition';
+import 'bootstrap-sass/assets/javascripts/bootstrap/tooltip';
diff --git a/app/assets/javascripts/commons/index.js b/app/assets/javascripts/commons/index.js
new file mode 100644
index 00000000000..72ede1d621a
--- /dev/null
+++ b/app/assets/javascripts/commons/index.js
@@ -0,0 +1,2 @@
+import './jquery';
+import './bootstrap';
diff --git a/app/assets/javascripts/commons/jquery.js b/app/assets/javascripts/commons/jquery.js
new file mode 100644
index 00000000000..b53f6284afc
--- /dev/null
+++ b/app/assets/javascripts/commons/jquery.js
@@ -0,0 +1,11 @@
+import 'jquery';
+
+// common jQuery plugins
+import 'jquery-ujs';
+import 'vendor/jquery.endless-scroll';
+import 'vendor/jquery.caret';
+import 'vendor/jquery.atwho';
+import 'vendor/jquery.scrollTo';
+import 'vendor/jquery.nicescroll';
+import 'vendor/jquery.waitforimages';
+import 'select2/select2';
diff --git a/app/assets/javascripts/graphs/graphs_bundle.js b/app/assets/javascripts/graphs/graphs_bundle.js
index ea5afbd9d29..a433c7ba8f0 100644
--- a/app/assets/javascripts/graphs/graphs_bundle.js
+++ b/app/assets/javascripts/graphs/graphs_bundle.js
@@ -1,4 +1,6 @@
+import Chart from 'vendor/Chart';
 import ContributorsStatGraph from './stat_graph_contributors';
 
 // export to global scope
+window.Chart = Chart;
 window.ContributorsStatGraph = ContributorsStatGraph;
diff --git a/app/assets/javascripts/issuable/time_tracking/time_tracking_bundle.js.es6 b/app/assets/javascripts/issuable/time_tracking/time_tracking_bundle.js.es6
index 958a0cc6d50..0134b7cb6f3 100644
--- a/app/assets/javascripts/issuable/time_tracking/time_tracking_bundle.js.es6
+++ b/app/assets/javascripts/issuable/time_tracking/time_tracking_bundle.js.es6
@@ -1,5 +1,7 @@
 /* global Vue */
 
+window.Vue = require('vue');
+window.Vue.use(require('vue-resource'));
 require('./components/time_tracker');
 require('../../smart_interval');
 require('../../subbable_resource');
diff --git a/app/assets/javascripts/lib/chart.js b/app/assets/javascripts/lib/chart.js
deleted file mode 100644
index 9b011d89e93..00000000000
--- a/app/assets/javascripts/lib/chart.js
+++ /dev/null
@@ -1,3 +0,0 @@
-/* eslint-disable func-names, space-before-function-paren */
-
-window.Chart = require('vendor/Chart');
diff --git a/app/assets/javascripts/lib/cropper.js b/app/assets/javascripts/lib/cropper.js
deleted file mode 100644
index 7862c6797c3..00000000000
--- a/app/assets/javascripts/lib/cropper.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/* eslint-disable func-names, space-before-function-paren */
-
-/*= require cropper */
-
-(function() {
-
-}).call(window);
diff --git a/app/assets/javascripts/lib/d3.js b/app/assets/javascripts/lib/d3.js
deleted file mode 100644
index a9dd32edbed..00000000000
--- a/app/assets/javascripts/lib/d3.js
+++ /dev/null
@@ -1,3 +0,0 @@
-/* eslint-disable func-names, space-before-function-paren */
-
-window.d3 = require('d3');
diff --git a/app/assets/javascripts/lib/vue_resource.js.es6 b/app/assets/javascripts/lib/vue_resource.js.es6
deleted file mode 100644
index 49babdea2e1..00000000000
--- a/app/assets/javascripts/lib/vue_resource.js.es6
+++ /dev/null
@@ -1,2 +0,0 @@
-window.Vue = require('vue');
-window.Vue.use(require('vue-resource'));
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/main.js
index 4c24d35b5bb..798553c16ac 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/main.js
@@ -6,35 +6,34 @@
 /* global AwardsHandler */
 /* global Aside */
 
-window.$ = window.jQuery = require('jquery');
-require('jquery-ujs');
-require('vendor/jquery.endless-scroll');
-require('vendor/jquery.waitforimages');
-require('vendor/jquery.caret');
-require('vendor/jquery.atwho');
-require('vendor/jquery.scrollTo');
-window.Cookies = require('js-cookie');
-require('./autosave');
-require('bootstrap/js/affix');
-require('bootstrap/js/alert');
-require('bootstrap/js/dropdown');
-require('bootstrap/js/modal');
-require('bootstrap/js/tab');
-require('bootstrap/js/transition');
-require('bootstrap/js/tooltip');
-require('select2/select2.js');
-window.Pikaday = require('pikaday');
-window._ = require('underscore');
-window.Dropzone = require('dropzone');
-window.Sortable = require('vendor/Sortable');
+import jQuery from 'jquery';
+import _ from 'underscore';
+import Cookies from 'js-cookie';
+import Pikaday from 'pikaday';
+import Dropzone from 'dropzone';
+import Sortable from 'vendor/Sortable';
+
+// libraries with import side-effects
 require('mousetrap');
 require('mousetrap/plugins/pause/mousetrap-pause');
+require('vendor/fuzzaldrin-plus');
+require('es6-promise').polyfill();
+
+// expose common libraries as globals (TODO: remove these)
+window.jQuery = jQuery;
+window.$ = jQuery;
+window._ = _;
+window.Cookies = Cookies;
+window.Pikaday = Pikaday;
+window.Dropzone = Dropzone;
+window.Sortable = Sortable;
+
+// shortcuts
 require('./shortcuts');
 require('./shortcuts_navigation');
 require('./shortcuts_dashboard_navigation');
 require('./shortcuts_issuable');
 require('./shortcuts_network');
-require('vendor/jquery.nicescroll');
 
 // behaviors
 require('./behaviors/autosize');
@@ -205,9 +204,6 @@ require('./visibility_select');
 require('./wikis');
 require('./zen_mode');
 
-require('vendor/fuzzaldrin-plus');
-require('es6-promise').polyfill();
-
 (function () {
   document.addEventListener('beforeunload', function () {
     // Unbind scroll events
@@ -285,7 +281,7 @@ require('es6-promise').polyfill();
     $.fn.tooltip.Constructor.DEFAULTS.trigger = 'hover';
     $body.tooltip({
       selector: '.has-tooltip, [data-toggle="tooltip"]',
-      placement: function (_, el) {
+      placement: function (tip, el) {
         return $(el).data('placement') || 'bottom';
       }
     });
diff --git a/app/assets/javascripts/profile/gl_crop.js.es6 b/app/assets/javascripts/profile/gl_crop.js.es6
index 192b1192d07..cf1566eeb87 100644
--- a/app/assets/javascripts/profile/gl_crop.js.es6
+++ b/app/assets/javascripts/profile/gl_crop.js.es6
@@ -1,5 +1,7 @@
 /* eslint-disable no-useless-escape, max-len, quotes, no-var, no-underscore-dangle, func-names, space-before-function-paren, no-unused-vars, no-return-assign, object-shorthand, one-var, one-var-declaration-per-line, comma-dangle, consistent-return, class-methods-use-this, new-parens */
 
+import 'vendor/cropper';
+
 ((global) => {
   // Matches everything but the file name
   const FILENAMEREGEX = /^.*[\\\/]/;
diff --git a/app/assets/javascripts/users/calendar.js b/app/assets/javascripts/users/calendar.js
index 5111b260e1c..754d448564f 100644
--- a/app/assets/javascripts/users/calendar.js
+++ b/app/assets/javascripts/users/calendar.js
@@ -1,5 +1,6 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, camelcase, vars-on-top, object-shorthand, comma-dangle, eqeqeq, no-mixed-operators, no-return-assign, newline-per-chained-call, prefer-arrow-callback, consistent-return, one-var, one-var-declaration-per-line, prefer-template, quotes, no-unused-vars, no-else-return, max-len */
-/* global d3 */
+
+import d3 from 'd3';
 
 (function() {
   var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
diff --git a/app/views/layouts/_head.html.haml b/app/views/layouts/_head.html.haml
index 302c1794628..f6d8bb08a64 100644
--- a/app/views/layouts/_head.html.haml
+++ b/app/views/layouts/_head.html.haml
@@ -28,7 +28,9 @@
   = stylesheet_link_tag "application", media: "all"
   = stylesheet_link_tag "print",       media: "print"
 
-  = javascript_include_tag(*webpack_asset_paths("application"))
+  = javascript_include_tag(*webpack_asset_paths("runtime"))
+  = javascript_include_tag(*webpack_asset_paths("common"))
+  = javascript_include_tag(*webpack_asset_paths("main"))
 
   - if content_for?(:page_specific_javascripts)
     = yield :page_specific_javascripts
diff --git a/app/views/profiles/_head.html.haml b/app/views/profiles/_head.html.haml
index 1df04ea614e..83ae9129807 100644
--- a/app/views/profiles/_head.html.haml
+++ b/app/views/profiles/_head.html.haml
@@ -1,3 +1,2 @@
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_tag('lib/cropper.js')
   = page_specific_javascript_bundle_tag('profile')
diff --git a/app/views/projects/boards/_show.html.haml b/app/views/projects/boards/_show.html.haml
index b3bc6010efb..3ae78387938 100644
--- a/app/views/projects/boards/_show.html.haml
+++ b/app/views/projects/boards/_show.html.haml
@@ -3,6 +3,7 @@
 - page_title "Boards"
 
 - content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag('common_vue')
   = page_specific_javascript_bundle_tag('boards')
   = page_specific_javascript_bundle_tag('simulate_drag') if Rails.env.test?
 
diff --git a/app/views/projects/commit/_pipelines_list.haml b/app/views/projects/commit/_pipelines_list.haml
index 6792b3f7a83..da5a676274f 100644
--- a/app/views/projects/commit/_pipelines_list.haml
+++ b/app/views/projects/commit/_pipelines_list.haml
@@ -4,4 +4,5 @@
 } }
 
 - content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag('common_vue')
   = page_specific_javascript_bundle_tag('commit_pipelines')
diff --git a/app/views/projects/cycle_analytics/show.html.haml b/app/views/projects/cycle_analytics/show.html.haml
index be17f2c764e..dd3fa814716 100644
--- a/app/views/projects/cycle_analytics/show.html.haml
+++ b/app/views/projects/cycle_analytics/show.html.haml
@@ -1,6 +1,7 @@
 - @no_container = true
 - page_title "Cycle Analytics"
 - content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag('common_vue')
   = page_specific_javascript_bundle_tag('cycle_analytics')
 
 = render "projects/head"
diff --git a/app/views/projects/environments/folder.html.haml b/app/views/projects/environments/folder.html.haml
index d9cb7bc0331..4b101447bc0 100644
--- a/app/views/projects/environments/folder.html.haml
+++ b/app/views/projects/environments/folder.html.haml
@@ -3,6 +3,7 @@
 = render "projects/pipelines/head"
 
 - content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag('common_vue')
   = page_specific_javascript_bundle_tag("environments_folder")
 
 #environments-folder-list-view{ data: { "can-create-deployment" => can?(current_user, :create_deployment, @project).to_s,
diff --git a/app/views/projects/environments/index.html.haml b/app/views/projects/environments/index.html.haml
index d6366b57957..80d2b6f5d95 100644
--- a/app/views/projects/environments/index.html.haml
+++ b/app/views/projects/environments/index.html.haml
@@ -3,6 +3,7 @@
 = render "projects/pipelines/head"
 
 - content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag('common_vue')
   = page_specific_javascript_bundle_tag("environments")
 
 #environments-list-view{ data: { environments_data: environments_list_data,
diff --git a/app/views/projects/graphs/charts.html.haml b/app/views/projects/graphs/charts.html.haml
index d3bce45e974..464ac34d961 100644
--- a/app/views/projects/graphs/charts.html.haml
+++ b/app/views/projects/graphs/charts.html.haml
@@ -1,7 +1,7 @@
 - @no_container = true
 - page_title "Charts"
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('lib_chart')
+  = page_specific_javascript_bundle_tag('common_d3')
   = page_specific_javascript_bundle_tag('graphs')
 = render "projects/commits/head"
 
diff --git a/app/views/projects/graphs/show.html.haml b/app/views/projects/graphs/show.html.haml
index d89dfe31e47..680f8ae6c8f 100644
--- a/app/views/projects/graphs/show.html.haml
+++ b/app/views/projects/graphs/show.html.haml
@@ -1,7 +1,7 @@
 - @no_container = true
 - page_title "Contributors"
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('lib_chart')
+  = page_specific_javascript_bundle_tag('common_d3')
   = page_specific_javascript_bundle_tag('graphs')
 = render 'projects/commits/head'
 
diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml
index 069f3d97943..d39f36e94c7 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -2,8 +2,6 @@
 - page_title           "#{@issue.title} (#{@issue.to_reference})", "Issues"
 - page_description     @issue.description
 - page_card_attributes @issue.card_attributes
-- content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('lib_vue')
 
 .clearfix.detail-page-header
   .issuable-header
diff --git a/app/views/projects/merge_requests/_show.html.haml b/app/views/projects/merge_requests/_show.html.haml
index 521b0694ca9..03d618327d4 100644
--- a/app/views/projects/merge_requests/_show.html.haml
+++ b/app/views/projects/merge_requests/_show.html.haml
@@ -3,6 +3,7 @@
 - page_description     @merge_request.description
 - page_card_attributes @merge_request.card_attributes
 - content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag('common_vue')
   = page_specific_javascript_bundle_tag('diff_notes')
 
 .merge-request{ 'data-url' => merge_request_path(@merge_request), 'data-project-path' => project_path(@merge_request.project) }
diff --git a/app/views/projects/merge_requests/conflicts.html.haml b/app/views/projects/merge_requests/conflicts.html.haml
index 1ecd9924d88..51d59280be8 100644
--- a/app/views/projects/merge_requests/conflicts.html.haml
+++ b/app/views/projects/merge_requests/conflicts.html.haml
@@ -1,6 +1,6 @@
 - page_title "Merge Conflicts", "#{@merge_request.title} (#{@merge_request.to_reference}", "Merge Requests"
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('lib_vue')
+  = page_specific_javascript_bundle_tag('common_vue')
   = page_specific_javascript_bundle_tag('merge_conflicts')
   = page_specific_javascript_tag('lib/ace.js')
 = render "projects/merge_requests/show/mr_title"
diff --git a/app/views/projects/pipelines/charts.html.haml b/app/views/projects/pipelines/charts.html.haml
index 8ffdfa1a2cf..4a5043aac3c 100644
--- a/app/views/projects/pipelines/charts.html.haml
+++ b/app/views/projects/pipelines/charts.html.haml
@@ -1,7 +1,7 @@
 - @no_container = true
 - page_title "Charts", "Pipelines"
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('lib_chart')
+  = page_specific_javascript_bundle_tag('common_d3')
   = page_specific_javascript_bundle_tag('graphs')
 = render 'head'
 
diff --git a/app/views/projects/pipelines/index.html.haml b/app/views/projects/pipelines/index.html.haml
index acb61aa2490..5d59ce06612 100644
--- a/app/views/projects/pipelines/index.html.haml
+++ b/app/views/projects/pipelines/index.html.haml
@@ -50,4 +50,5 @@
   .content-list.pipelines{ data: { url: namespace_project_pipelines_path(@project.namespace, @project, format: :json) } }
     .vue-pipelines-index
 
+= page_specific_javascript_bundle_tag('common_vue')
 = page_specific_javascript_bundle_tag('vue_pipelines')
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index 37a0c63e514..048fc488207 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -1,5 +1,6 @@
 - todo = issuable_todo(issuable)
 - content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag('common_vue')
   = page_specific_javascript_bundle_tag('issuable')
 
 %aside.right-sidebar.js-right-sidebar{ data: { "offset-top" => "101", "spy" => "affix" }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite' }
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index af091f9ab88..76cd330e80a 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -1,7 +1,7 @@
 - page_title       @user.name
 - page_description @user.bio
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('lib_d3')
+  = page_specific_javascript_bundle_tag('common_d3')
   = page_specific_javascript_bundle_tag('users')
 - header_title     @user.name, user_path(@user)
 - @no_container = true
diff --git a/changelogs/unreleased/commons-chunk-plugin.yml b/changelogs/unreleased/commons-chunk-plugin.yml
new file mode 100644
index 00000000000..5c11ea3bbb2
--- /dev/null
+++ b/changelogs/unreleased/commons-chunk-plugin.yml
@@ -0,0 +1,5 @@
+---
+title: Use webpack CommonsChunkPlugin to place common javascript libraries in their
+  own bundles
+merge_request: 9647
+author:
diff --git a/config/application.rb b/config/application.rb
index 45f3b20d214..f1a986d1731 100644
--- a/config/application.rb
+++ b/config/application.rb
@@ -100,7 +100,6 @@ module Gitlab
     config.assets.precompile << "katex.js"
     config.assets.precompile << "xterm/xterm.css"
     config.assets.precompile << "lib/ace.js"
-    config.assets.precompile << "lib/cropper.js"
     config.assets.precompile << "lib/raphael.js"
     config.assets.precompile << "u2f.js"
     config.assets.precompile << "vendor/assets/fonts/*"
diff --git a/config/karma.config.js b/config/karma.config.js
index 2f3cc932413..a23e62f5022 100644
--- a/config/karma.config.js
+++ b/config/karma.config.js
@@ -1,9 +1,10 @@
 var path = require('path');
+var webpack = require('webpack');
 var webpackConfig = require('./webpack.config.js');
 var ROOT_PATH = path.resolve(__dirname, '..');
 
 // add coverage instrumentation to babel config
-if (webpackConfig && webpackConfig.module && webpackConfig.module.rules) {
+if (webpackConfig.module && webpackConfig.module.rules) {
   var babelConfig = webpackConfig.module.rules.find(function (rule) {
     return rule.loader === 'babel-loader';
   });
@@ -13,6 +14,16 @@ if (webpackConfig && webpackConfig.module && webpackConfig.module.rules) {
   babelConfig.options.plugins.push('istanbul');
 }
 
+// remove problematic plugins
+if (webpackConfig.plugins) {
+  webpackConfig.plugins = webpackConfig.plugins.filter(function (plugin) {
+    return !(
+      plugin instanceof webpack.optimize.CommonsChunkPlugin ||
+      plugin instanceof webpack.DefinePlugin
+    );
+  });
+}
+
 // Karma configuration
 module.exports = function(config) {
   var progressReporter = process.env.CI ? 'mocha' : 'progress';
diff --git a/config/webpack.config.js b/config/webpack.config.js
index 13273902b0e..d9fa70c29fb 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -17,7 +17,10 @@ var WEBPACK_REPORT = process.env.WEBPACK_REPORT;
 var config = {
   context: path.join(ROOT_PATH, 'app/assets/javascripts'),
   entry: {
-    application:          './application.js',
+    common:               './commons/index.js',
+    common_vue:           ['vue', 'vue-resource'],
+    common_d3:            ['d3'],
+    main:                 './main.js',
     blob_edit:            './blob_edit/blob_edit_bundle.js',
     boards:               './boards/boards_bundle.js',
     simulate_drag:        './test_utils/simulate_drag.js',
@@ -38,16 +41,13 @@ var config = {
     snippet:              './snippet/snippet_bundle.js',
     terminal:             './terminal/terminal_bundle.js',
     users:                './users/users_bundle.js',
-    lib_chart:            './lib/chart.js',
-    lib_d3:               './lib/d3.js',
-    lib_vue:              './lib/vue_resource.js',
     vue_pipelines:        './vue_pipelines_index/index.js',
   },
 
   output: {
     path: path.join(ROOT_PATH, 'public/assets/webpack'),
     publicPath: '/assets/webpack/',
-    filename: IS_PRODUCTION ? '[name]-[chunkhash].js' : '[name].js'
+    filename: IS_PRODUCTION ? '[name].[chunkhash].bundle.js' : '[name].bundle.js'
   },
 
   devtool: 'inline-source-map',
@@ -82,14 +82,56 @@ var config = {
       modules: false,
       assets: true
     }),
+
+    // prevent pikaday from including moment.js
     new webpack.IgnorePlugin(/moment/, /pikaday/),
+
+    // fix legacy jQuery plugins which depend on globals
+    new webpack.ProvidePlugin({
+      $: 'jquery',
+      jQuery: 'jquery',
+    }),
+
+    // use deterministic module ids in all environments
+    IS_PRODUCTION ?
+      new webpack.HashedModuleIdsPlugin() :
+      new webpack.NamedModulesPlugin(),
+
+    // create cacheable common library bundle for all vue chunks
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'common_vue',
+      chunks: [
+        'boards',
+        'commit_pipelines',
+        'cycle_analytics',
+        'diff_notes',
+        'environments',
+        'environments_folder',
+        'issuable',
+        'merge_conflicts',
+        'vue_pipelines',
+      ],
+      minChunks: function(module, count) {
+        return module.resource && (/vue_shared/).test(module.resource);
+      },
+    }),
+
+    // create cacheable common library bundle for all d3 chunks
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'common_d3',
+      chunks: ['graphs', 'users'],
+    }),
+
+    // create cacheable common library bundles
+    new webpack.optimize.CommonsChunkPlugin({
+      names: ['main', 'common', 'runtime'],
+    }),
   ],
 
   resolve: {
     extensions: ['.js', '.es6', '.js.es6'],
     alias: {
       '~':              path.join(ROOT_PATH, 'app/assets/javascripts'),
-      'bootstrap/js':   'bootstrap-sass/assets/javascripts/bootstrap',
       'emoji-aliases$': path.join(ROOT_PATH, 'fixtures/emojis/aliases.json'),
       'icons':          path.join(ROOT_PATH, 'app/views/shared/icons'),
       'vendor':         path.join(ROOT_PATH, 'vendor/assets/javascripts'),
diff --git a/spec/javascripts/test_bundle.js b/spec/javascripts/test_bundle.js
index ca707d872a4..fae462561e9 100644
--- a/spec/javascripts/test_bundle.js
+++ b/spec/javascripts/test_bundle.js
@@ -5,23 +5,12 @@ jasmine.getFixtures().fixturesPath = 'base/spec/javascripts/fixtures';
 jasmine.getJSONFixtures().fixturesPath = 'base/spec/javascripts/fixtures';
 
 // include common libraries
+require('~/commons/index.js');
 window.$ = window.jQuery = require('jquery');
 window._ = require('underscore');
 window.Cookies = require('js-cookie');
 window.Vue = require('vue');
 window.Vue.use(require('vue-resource'));
-require('jquery-ujs');
-require('bootstrap/js/affix');
-require('bootstrap/js/alert');
-require('bootstrap/js/button');
-require('bootstrap/js/collapse');
-require('bootstrap/js/dropdown');
-require('bootstrap/js/modal');
-require('bootstrap/js/scrollspy');
-require('bootstrap/js/tab');
-require('bootstrap/js/transition');
-require('bootstrap/js/tooltip');
-require('bootstrap/js/popover');
 
 // stub expected globals
 window.gl = window.gl || {};