[kbn/ui-shared-deps] expand and split (elastic#62364)

* [kbn/ui-shared-deps] expand and split * add two import styles for eui/react-dom that are new Co-authored-by: spalger <spalger@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
spalger · Apr 3, 2020 · 96a8283 · 96a8283
1 parent 325c5ce
commit 96a8283
Show file tree

Hide file tree

Showing 15 changed files with 116 additions and 74 deletions.
diff --git a/package.json b/package.json
@@ -235,6 +235,7 @@
     "react-monaco-editor": "~0.27.0",
     "react-redux": "^7.1.3",
     "react-resize-detector": "^4.2.0",
+    "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-sizeme": "^2.3.6",
     "react-use": "^13.27.0",

diff --git a/packages/kbn-optimizer/src/worker/webpack.config.ts b/packages/kbn-optimizer/src/worker/webpack.config.ts
@@ -27,7 +27,7 @@ import TerserPlugin from 'terser-webpack-plugin';
 import webpackMerge from 'webpack-merge';
 // @ts-ignore
 import { CleanWebpackPlugin } from 'clean-webpack-plugin';
-import * as SharedDeps from '@kbn/ui-shared-deps';
+import * as UiSharedDeps from '@kbn/ui-shared-deps';
 
 import { Bundle, WorkerConfig, parseDirPath, DisallowedSyntaxPlugin } from '../common';
 
@@ -71,7 +71,7 @@ export function getWebpackConfig(bundle: Bundle, worker: WorkerConfig) {
     },
 
     externals: {
-      ...SharedDeps.externals,
+      ...UiSharedDeps.externals,
     },
 
     plugins: [new CleanWebpackPlugin(), new DisallowedSyntaxPlugin()],

diff --git a/packages/kbn-ui-framework/package.json b/packages/kbn-ui-framework/package.json
@@ -38,7 +38,7 @@
     "brace": "0.11.1",
     "chalk": "^2.4.2",
     "chokidar": "3.2.1",
-    "core-js": "^3.2.1",
+    "core-js": "^3.6.4",
     "css-loader": "^3.4.2",
     "expose-loader": "^0.7.5",
     "file-loader": "^4.2.0",

diff --git a/packages/kbn-ui-shared-deps/entry.js b/packages/kbn-ui-shared-deps/entry.js
@@ -17,31 +17,40 @@
  * under the License.
  */
 
-// import global polyfills before everything else
 require('./polyfills');
 
 // must load before angular
 export const Jquery = require('jquery');
 window.$ = window.jQuery = Jquery;
 
-export const Angular = require('angular');
-export const ElasticCharts = require('@elastic/charts');
-export const ElasticEui = require('@elastic/eui');
-export const ElasticEuiLibServices = require('@elastic/eui/lib/services');
-export const ElasticEuiLightTheme = require('@elastic/eui/dist/eui_theme_light.json');
-export const ElasticEuiDarkTheme = require('@elastic/eui/dist/eui_theme_dark.json');
+// stateful deps
 export const KbnI18n = require('@kbn/i18n');
 export const KbnI18nAngular = require('@kbn/i18n/angular');
 export const KbnI18nReact = require('@kbn/i18n/react');
+export const Angular = require('angular');
 export const Moment = require('moment');
 export const MomentTimezone = require('moment-timezone/moment-timezone');
+export const Monaco = require('./monaco.ts');
+export const MonacoBare = require('monaco-editor/esm/vs/editor/editor.api');
 export const React = require('react');
 export const ReactDom = require('react-dom');
+export const ReactDomServer = require('react-dom/server');
 export const ReactIntl = require('react-intl');
 export const ReactRouter = require('react-router'); // eslint-disable-line
 export const ReactRouterDom = require('react-router-dom');
-export const Monaco = require('./monaco.ts');
-export const MonacoBare = require('monaco-editor/esm/vs/editor/editor.api');
 
-// load timezone data into moment-timezone
 Moment.tz.load(require('moment-timezone/data/packed/latest.json'));
+
+// big deps which are locked to a single version
+export const Rxjs = require('rxjs');
+export const RxjsOperators = require('rxjs/operators');
+export const ElasticCharts = require('@elastic/charts');
+export const ElasticEui = require('@elastic/eui');
+export const ElasticEuiLibServices = require('@elastic/eui/lib/services');
+export const ElasticEuiLibServicesFormat = require('@elastic/eui/lib/services/format');
+export const ElasticEuiLightTheme = require('@elastic/eui/dist/eui_theme_light.json');
+export const ElasticEuiDarkTheme = require('@elastic/eui/dist/eui_theme_dark.json');
+export const ElasticEuiChartsTheme = require('@elastic/eui/dist/eui_charts_theme');
+
+// massive deps that we should really get rid of or reduce in size substantially
+export const ElasticsearchBrowser = require('elasticsearch-browser/elasticsearch.js');
diff --git a/packages/kbn-ui-shared-deps/index.d.ts b/packages/kbn-ui-shared-deps/index.d.ts
@@ -25,7 +25,12 @@ export const distDir: string;
 /**
  * Filename of the main bundle file in the distributable directory
  */
-export const distFilename: string;
+export const jsFilename: string;
+
+/**
+ * Filename of files that must be loaded before the jsFilename
+ */
+export const jsDepFilenames: string[];
 
 /**
  * Filename of the unthemed css file in the distributable directory

diff --git a/packages/kbn-ui-shared-deps/index.js b/packages/kbn-ui-shared-deps/index.js
@@ -20,17 +20,14 @@
 const Path = require('path');
 
 exports.distDir = Path.resolve(__dirname, 'target');
-exports.distFilename = 'kbn-ui-shared-deps.js';
+exports.jsDepFilenames = ['kbn-ui-shared-deps.@elastic.js'];
+exports.jsFilename = 'kbn-ui-shared-deps.js';
 exports.baseCssDistFilename = 'kbn-ui-shared-deps.css';
 exports.lightCssDistFilename = 'kbn-ui-shared-deps.light.css';
 exports.darkCssDistFilename = 'kbn-ui-shared-deps.dark.css';
 exports.externals = {
+  // stateful deps
   angular: '__kbnSharedDeps__.Angular',
-  '@elastic/charts': '__kbnSharedDeps__.ElasticCharts',
-  '@elastic/eui': '__kbnSharedDeps__.ElasticEui',
-  '@elastic/eui/lib/services': '__kbnSharedDeps__.ElasticEuiLibServices',
-  '@elastic/eui/dist/eui_theme_light.json': '__kbnSharedDeps__.ElasticEuiLightTheme',
-  '@elastic/eui/dist/eui_theme_dark.json': '__kbnSharedDeps__.ElasticEuiDarkTheme',
   '@kbn/i18n': '__kbnSharedDeps__.KbnI18n',
   '@kbn/i18n/angular': '__kbnSharedDeps__.KbnI18nAngular',
   '@kbn/i18n/react': '__kbnSharedDeps__.KbnI18nReact',
@@ -39,10 +36,31 @@ exports.externals = {
   'moment-timezone': '__kbnSharedDeps__.MomentTimezone',
   react: '__kbnSharedDeps__.React',
   'react-dom': '__kbnSharedDeps__.ReactDom',
+  'react-dom/server': '__kbnSharedDeps__.ReactDomServer',
   'react-intl': '__kbnSharedDeps__.ReactIntl',
   'react-router': '__kbnSharedDeps__.ReactRouter',
   'react-router-dom': '__kbnSharedDeps__.ReactRouterDom',
   '@kbn/ui-shared-deps/monaco': '__kbnSharedDeps__.Monaco',
   // this is how plugins/consumers from npm load monaco
   'monaco-editor/esm/vs/editor/editor.api': '__kbnSharedDeps__.MonacoBare',
+
+  /**
+   * big deps which are locked to a single version
+   */
+  rxjs: '__kbnSharedDeps__.Rxjs',
+  'rxjs/operators': '__kbnSharedDeps__.RxjsOperators',
+  '@elastic/charts': '__kbnSharedDeps__.ElasticCharts',
+  '@elastic/eui': '__kbnSharedDeps__.ElasticEui',
+  '@elastic/eui/lib/services': '__kbnSharedDeps__.ElasticEuiLibServices',
+  '@elastic/eui/lib/services/format': '__kbnSharedDeps__.ElasticEuiLibServicesFormat',
+  '@elastic/eui/dist/eui_charts_theme': '__kbnSharedDeps__.ElasticEuiChartsTheme',
+  '@elastic/eui/dist/eui_theme_light.json': '__kbnSharedDeps__.ElasticEuiLightTheme',
+  '@elastic/eui/dist/eui_theme_dark.json': '__kbnSharedDeps__.ElasticEuiDarkTheme',
+
+  /**
+   * massive deps that we should really get rid of or reduce in size substantially
+   */
+  elasticsearch: '__kbnSharedDeps__.ElasticsearchBrowser',
+  'elasticsearch-browser': '__kbnSharedDeps__.ElasticsearchBrowser',
+  'elasticsearch-browser/elasticsearch': '__kbnSharedDeps__.ElasticsearchBrowser',
 };
diff --git a/packages/kbn-ui-shared-deps/package.json b/packages/kbn-ui-shared-deps/package.json
@@ -1,37 +1,41 @@
 {
   "name": "@kbn/ui-shared-deps",
   "version": "1.0.0",
-  "license": "Apache-2.0",
   "private": true,
+  "license": "Apache-2.0",
   "scripts": {
     "build": "node scripts/build",
     "kbn:bootstrap": "node scripts/build --dev",
     "kbn:watch": "node scripts/build --watch"
   },
-  "devDependencies": {
-    "abortcontroller-polyfill": "^1.4.0",
-    "@elastic/eui": "21.0.1",
-    "@kbn/babel-preset": "1.0.0",
+  "dependencies": {
     "@elastic/charts": "^18.1.1",
-    "@kbn/dev-utils": "1.0.0",
+    "@elastic/eui": "21.0.1",
     "@kbn/i18n": "1.0.0",
-    "@yarnpkg/lockfile": "^1.1.0",
+    "abortcontroller-polyfill": "^1.4.0",
     "angular": "^1.7.9",
     "core-js": "^3.2.1",
-    "css-loader": "^3.4.2",
     "custom-event-polyfill": "^0.3.0",
-    "del": "^5.1.0",
+    "elasticsearch-browser": "^16.7.0",
     "jquery": "^3.4.1",
-    "mini-css-extract-plugin": "0.8.0",
     "moment": "^2.24.0",
     "moment-timezone": "^0.5.27",
+    "monaco-editor": "~0.17.0",
+    "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-intl": "^2.8.0",
-    "react": "^16.12.0",
-    "read-pkg": "^5.2.0",
+    "react-router": "^5.1.2",
+    "react-router-dom": "^5.1.2",
     "regenerator-runtime": "^0.13.3",
+    "rxjs": "^6.5.3",
     "symbol-observable": "^1.2.0",
-    "webpack": "^4.41.5",
     "whatwg-fetch": "^3.0.0"
+  },
+  "devDependencies": {
+    "@kbn/babel-preset": "1.0.0",
+    "@kbn/dev-utils": "1.0.0",
+    "css-loader": "^3.4.2",
+    "del": "^5.1.0",
+    "webpack": "^4.41.5"
   }
 }
diff --git a/packages/kbn-ui-shared-deps/webpack.config.js b/packages/kbn-ui-shared-deps/webpack.config.js
@@ -23,27 +23,27 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const { REPO_ROOT } = require('@kbn/dev-utils');
 const webpack = require('webpack');
 
-const SharedDeps = require('./index');
+const UiSharedDeps = require('./index');
 
 const MOMENT_SRC = require.resolve('moment/min/moment-with-locales.js');
 
 exports.getWebpackConfig = ({ dev = false } = {}) => ({
   mode: dev ? 'development' : 'production',
   entry: {
-    [SharedDeps.distFilename.replace(/\.js$/, '')]: './entry.js',
-    [SharedDeps.darkCssDistFilename.replace(/\.css$/, '')]: [
+    'kbn-ui-shared-deps': './entry.js',
+    'kbn-ui-shared-deps.dark': [
       '@elastic/eui/dist/eui_theme_dark.css',
       '@elastic/charts/dist/theme_only_dark.css',
     ],
-    [SharedDeps.lightCssDistFilename.replace(/\.css$/, '')]: [
+    'kbn-ui-shared-deps.light': [
       '@elastic/eui/dist/eui_theme_light.css',
       '@elastic/charts/dist/theme_only_light.css',
     ],
   },
   context: __dirname,
   devtool: dev ? '#cheap-source-map' : false,
   output: {
-    path: SharedDeps.distDir,
+    path: UiSharedDeps.distDir,
     filename: '[name].js',
     sourceMapFilename: '[file].map',
     publicPath: '__REPLACE_WITH_PUBLIC_PATH__',
@@ -81,6 +81,16 @@ exports.getWebpackConfig = ({ dev = false } = {}) => ({
 
   optimization: {
     noEmitOnErrors: true,
+    splitChunks: {
+      cacheGroups: {
+        'kbn-ui-shared-deps.@elastic': {
+          name: 'kbn-ui-shared-deps.@elastic',
+          test: m => m.resource && m.resource.includes('@elastic'),
+          chunks: 'all',
+          enforce: true,
+        },
+      },
+    },
   },
 
   performance: {

diff --git a/packages/kbn-ui-shared-deps/yarn.lock b/packages/kbn-ui-shared-deps/yarn.lock
@@ -0,0 +1 @@
+../../yarn.lock
diff --git a/src/legacy/ui/ui_render/bootstrap/template.js.hbs b/src/legacy/ui/ui_render/bootstrap/template.js.hbs
@@ -76,24 +76,33 @@ if (window.__kbnStrictCsp__ && window.__kbnCspNotEnforced__) {
 
     load({
       deps: [
+        {{#each sharedJsDepFilenames}}
+          '{{../regularBundlePath}}/kbn-ui-shared-deps/{{this}}',
+        {{/each}}
+      ],
+      urls: [
         {
           deps: [
-            '{{dllBundlePath}}/vendors_runtime.bundle.dll.js'
+            '{{regularBundlePath}}/kbn-ui-shared-deps/{{sharedJsFilename}}',
+            {
+              deps: [
+                '{{dllBundlePath}}/vendors_runtime.bundle.dll.js'
+              ],
+              urls: [
+                {{#each dllJsChunks}}
+                  '{{this}}',
+                {{/each}}
+              ]
+            },
+            '{{regularBundlePath}}/commons.bundle.js',
           ],
           urls: [
-            {{#each dllJsChunks}}
+            '{{regularBundlePath}}/{{appId}}.bundle.js',
+            {{#each styleSheetPaths}}
               '{{this}}',
             {{/each}}
           ]
-        },
-        '{{regularBundlePath}}/kbn-ui-shared-deps/{{sharedDepsFilename}}',
-        '{{regularBundlePath}}/commons.bundle.js',
-      ],
-      urls: [
-        '{{regularBundlePath}}/{{appId}}.bundle.js',
-        {{#each styleSheetPaths}}
-          '{{this}}',
-        {{/each}},
+        }
       ]
     });
   };

diff --git a/src/legacy/ui/ui_render/ui_render_mixin.js b/src/legacy/ui/ui_render/ui_render_mixin.js
@@ -141,7 +141,8 @@ export function uiRenderMixin(kbnServer, server, config) {
             dllBundlePath,
             dllJsChunks,
             styleSheetPaths,
-            sharedDepsFilename: UiSharedDeps.distFilename,
+            sharedJsFilename: UiSharedDeps.jsFilename,
+            sharedJsDepFilenames: UiSharedDeps.jsDepFilenames,
             darkMode,
           },
         });

diff --git a/tasks/config/karma.js b/tasks/config/karma.js
@@ -54,7 +54,11 @@ module.exports = function(grunt) {
     return [
       'http://localhost:5610/test_bundle/built_css.css',
 
-      `http://localhost:5610/bundles/kbn-ui-shared-deps/${UiSharedDeps.distFilename}`,
+      ...UiSharedDeps.jsDepFilenames.map(
+        chunkFilename => `http://localhost:5610/bundles/kbn-ui-shared-deps/${chunkFilename}`
+      ),
+      `http://localhost:5610/bundles/kbn-ui-shared-deps/${UiSharedDeps.jsFilename}`,
+
       'http://localhost:5610/built_assets/dlls/vendors_runtime.bundle.dll.js',
       ...DllCompiler.getRawDllConfig().chunks.map(
         chunk => `http://localhost:5610/built_assets/dlls/vendors${chunk}.bundle.dll.js`

diff --git a/webpackShims/elasticsearch-browser.js b/webpackShims/elasticsearch-browser.js
diff --git a/x-pack/package.json b/x-pack/package.json
@@ -315,6 +315,7 @@
     "react-portal": "^3.2.0",
     "react-redux": "^7.1.3",
     "react-reverse-portal": "^1.0.4",
+    "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-shortcuts": "^2.0.0",
     "react-sticky": "^6.0.3",

diff --git a/yarn.lock b/yarn.lock
@@ -10939,7 +10939,7 @@ core-js@^2.2.0, core-js@^2.4.0, core-js@^2.5.0, core-js@^2.5.1, core-js@^2.5.3,
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.9.tgz#6b4b214620c834152e179323727fc19741b084f2"
   integrity sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A==
 
-core-js@^3.0.1, core-js@^3.0.4, core-js@^3.2.1, core-js@^3.4.1, core-js@^3.6.4:
+core-js@^3.0.1, core-js@^3.0.4, core-js@^3.4.1, core-js@^3.6.4:
   version "3.6.4"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.4.tgz#440a83536b458114b9cb2ac1580ba377dc470647"
   integrity sha512-4paDGScNgZP2IXXilaffL9X7968RuvwlkK3xWtZRVqgd8SYNiVKRJvkFd1aqqEuPfN7E68ZHEp9hDj6lHj4Hyw==
@@ -25520,7 +25520,7 @@ react-router-redux@^4.0.8:
   resolved "https://registry.yarnpkg.com/react-router-redux/-/react-router-redux-4.0.8.tgz#227403596b5151e182377dab835b5d45f0f8054e"
   integrity sha1-InQDWWtRUeGCN32rg1tdRfD4BU4=
 
-react-router@5.1.2:
+react-router@5.1.2, react-router@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.1.2.tgz#6ea51d789cb36a6be1ba5f7c0d48dd9e817d3418"
   integrity sha512-yjEuMFy1ONK246B+rsa0cUam5OeAQ8pyclRDgpxuSCrAlJ1qN9uZ5IgyKC7gQg0w8OM50NXHEegPh/ks9YuR2A==