From 92b373b3048f1be2b380781b76e4255f31e6a6a1 Mon Sep 17 00:00:00 2001
From: Tyler Smalley <tylersmalley@me.com>
Date: Fri, 5 Jan 2018 10:05:17 -0800
Subject: [PATCH] [optimizer] More aggressive chunking of common/vendor code
 (#15816)

Previously, we were not aggressive in combining common code which resulted in duplicates included in the bundles.

As an example `node_modules/elasticsearch-browser/elasticsearch.angular.js` is present in the following chunks:

* kibana.bundle.js
* dashboardViewer.bundle.js
* apm.bundle.js
* monitoring.bundle.js
* ml.bundle.js
* timelion.bundle.js
* graph.bundle.js

Vendor code (anything inside Kibana's node_modules) is placed in vendors.bundle.js while everything else with more than two references is placed in commons.bundle.js.

This has a couple positive side-effects (numbers are with x-pack & canvas):

* Decreased build time. Seeing builds go from 475.76 seconds to 274.72.
* Decreased memory overhead. Uses roughly 1/3 the memory overhead.
* Decreased bundle size. A 68% reduction in overall bundle size. Going from 66.16 MB to 21.13 MB.

Signed-off-by: Tyler Smalley <tyler.smalley@elastic.co>
---
 src/optimize/base_optimizer.js     | 24 +++++++++++++++---------
 src/ui/ui_render/views/ui_app.jade |  3 +++
 tasks/config/karma.js              |  6 ++++++
 3 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/optimize/base_optimizer.js b/src/optimize/base_optimizer.js
index 5b4d149372511..27d2a17ec79eb 100644
--- a/src/optimize/base_optimizer.js
+++ b/src/optimize/base_optimizer.js
@@ -3,10 +3,6 @@ import { writeFile } from 'fs';
 import Boom from 'boom';
 import ExtractTextPlugin from 'extract-text-webpack-plugin';
 import webpack from 'webpack';
-import CommonsChunkPlugin from 'webpack/lib/optimize/CommonsChunkPlugin';
-import DefinePlugin from 'webpack/lib/DefinePlugin';
-import UglifyJsPlugin from 'webpack/lib/optimize/UglifyJsPlugin';
-import NoEmitOnErrorsPlugin from 'webpack/lib/NoEmitOnErrorsPlugin';
 import Stats from 'webpack/lib/Stats';
 import webpackMerge from 'webpack-merge';
 
@@ -98,6 +94,8 @@ export default class BaseOptimizer {
       });
     }
 
+    const nodeModulesPath = fromRoot('node_modules');
+
     /**
      * Adds a cache loader if we're running in dev mode. The reason we're not adding
      * the cache-loader when running in production mode is that it creates cache
@@ -141,12 +139,20 @@ export default class BaseOptimizer {
           allChunks: true
         }),
 
-        new CommonsChunkPlugin({
+        new webpack.optimize.CommonsChunkPlugin({
           name: 'commons',
-          filename: 'commons.bundle.js'
+          filename: 'commons.bundle.js',
+          minChunks: 2,
+        }),
+
+        new webpack.optimize.CommonsChunkPlugin({
+          name: 'vendors',
+          filename: 'vendors.bundle.js',
+          // only combine node_modules from Kibana
+          minChunks: module => module.context && module.context.indexOf(nodeModulesPath) !== -1
         }),
 
-        new NoEmitOnErrorsPlugin(),
+        new webpack.NoEmitOnErrorsPlugin(),
       ],
 
       module: {
@@ -233,12 +239,12 @@ export default class BaseOptimizer {
 
     return webpackMerge(commonConfig, {
       plugins: [
-        new DefinePlugin({
+        new webpack.DefinePlugin({
           'process.env': {
             'NODE_ENV': '"production"'
           }
         }),
-        new UglifyJsPlugin({
+        new webpack.optimize.UglifyJsPlugin({
           compress: {
             warnings: false
           },
diff --git a/src/ui/ui_render/views/ui_app.jade b/src/ui/ui_render/views/ui_app.jade
index 1595059410bfa..120f26ad9046a 100644
--- a/src/ui/ui_render/views/ui_app.jade
+++ b/src/ui/ui_render/views/ui_app.jade
@@ -120,8 +120,11 @@ block content
         return anchor.href;
       }
       var files = [
+        bundleFile('vendors.style.css'),
         bundleFile('commons.style.css'),
         bundleFile('#{app.getId()}.style.css'),
+
+        bundleFile('vendors.bundle.js'),
         bundleFile('commons.bundle.js'),
         bundleFile('#{app.getId()}.bundle.js')
       ];
diff --git a/tasks/config/karma.js b/tasks/config/karma.js
index b362b5471c6e5..b72df5f6ad709 100644
--- a/tasks/config/karma.js
+++ b/tasks/config/karma.js
@@ -37,8 +37,11 @@ module.exports = function (grunt) {
 
       // list of files / patterns to load in the browser
       files: [
+        'http://localhost:5610/bundles/vendors.bundle.js',
         'http://localhost:5610/bundles/commons.bundle.js',
         'http://localhost:5610/bundles/tests.bundle.js',
+
+        'http://localhost:5610/bundles/vendors.style.css',
         'http://localhost:5610/bundles/commons.style.css',
         'http://localhost:5610/bundles/tests.style.css'
       ],
@@ -126,8 +129,11 @@ module.exports = function (grunt) {
       singleRun: true,
       options: {
         files: [
+          'http://localhost:5610/bundles/vendors.bundle.js',
           'http://localhost:5610/bundles/commons.bundle.js',
           `http://localhost:5610/bundles/tests.bundle.js?shards=${TOTAL_CI_SHARDS}&shard_num=${n}`,
+
+          'http://localhost:5610/bundles/vendors.style.css',
           'http://localhost:5610/bundles/commons.style.css',
           'http://localhost:5610/bundles/tests.style.css'
         ]