[Maps] Code split Maps app

x-pack/plugins/maps/public/connected_components/gis_map/shim/index.ts

@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { GisMap } from '../index';
+
+// eslint-disable-next-line import/no-default-export
+export default GisMap;

x-pack/plugins/maps/public/connected_components/gis_map/view.js

@@ -5,14 +5,13 @@
  */
 
 import _ from 'lodash';
-import React, { Component } from 'react';
+import React, { Component, lazy, Suspense } from 'react';
 import classNames from 'classnames';
-import { MBMapContainer } from '../map/mb';
 import { WidgetOverlay } from '../widget_overlay';
 import { ToolbarOverlay } from '../toolbar_overlay';
 import { LayerPanel } from '../layer_panel';
 import { AddLayerPanel } from '../layer_addpanel';
-import { EuiFlexGroup, EuiFlexItem, EuiCallOut } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiCallOut, EuiLoadingSpinner } from '@elastic/eui';
 import { ExitFullScreenButton } from '../../../../../../src/plugins/kibana_react/public';
 
 import { getIndexPatternsFromIds } from '../../index_pattern_util';
@@ -22,9 +21,11 @@ import { i18n } from '@kbn/i18n';
 import uuid from 'uuid/v4';
 import { FLYOUT_STATE } from '../../reducers/ui';
 import { MapSettingsPanel } from '../map_settings_panel';
+import { registerLayerWizards } from '../../layers/load_layer_wizards';
 
 const RENDER_COMPLETE_EVENT = 'renderComplete';
 
+const MBMapContainer = lazy(() => import('../map/mb'));
 export class GisMap extends Component {
   state = {
     isInitialLoadRenderTimeoutComplete: false,
@@ -36,6 +37,7 @@ export class GisMap extends Component {
     this._isMounted = true;
     this._isInitalLoadRenderTimerStarted = false;
     this._setRefreshTimer();
+    registerLayerWizards();
   }
 
   componentDidUpdate() {
@@ -197,11 +199,13 @@ export class GisMap extends Component {
         data-shared-item
       >
         <EuiFlexItem className="mapMapWrapper">
-          <MBMapContainer
-            addFilters={addFilters}
-            geoFields={this.state.geoFields}
-            renderTooltipContent={renderTooltipContent}
-          />
+          <Suspense fallback={<EuiLoadingSpinner />}>
+            <MBMapContainer
+              addFilters={addFilters}
+              geoFields={this.state.geoFields}
+              renderTooltipContent={renderTooltipContent}
+            />
+          </Suspense>
           {!this.props.hideToolbarOverlay && (
             <ToolbarOverlay addFilters={addFilters} geoFields={this.state.geoFields} />
           )}

x-pack/plugins/maps/public/connected_components/map/mb/index.js

@@ -76,4 +76,4 @@ function mapDispatchToProps(dispatch) {
 const connectedMBMapContainer = connect(mapStateToProps, mapDispatchToProps, null, {
   forwardRef: true,
 })(MBMapContainer);
-export { connectedMBMapContainer as MBMapContainer };
+export { connectedMBMapContainer as default };

x-pack/plugins/maps/public/embeddable/lazy/index.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+// These are map-dependencies of the embeddable.
+// By lazy-loading these, the Maps-app can register the embeddable when the plugin mounts, without actually pulling all the code.
+export * from '../../angular/services/gis_map_saved_object_loader';
+export * from '../map_embeddable';
+export * from '../../kibana_services';
+export * from '../../../common/constants';
+export * from '../../reducers/store';
+export * from '../../actions/map_actions';
+export * from '../../selectors/map_selectors';
+export * from '../../angular/get_initial_layers';
+export * from './../merge_input_with_saved_map';

x-pack/plugins/maps/public/embeddable/map_embeddable.tsx

@@ -5,12 +5,13 @@
  */
 
 import _ from 'lodash';
-import React from 'react';
+import React, { Suspense, lazy } from 'react';
 import { Provider } from 'react-redux';
 import { render, unmountComponentAtNode } from 'react-dom';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import { Subscription } from 'rxjs';
 import { Unsubscribe } from 'redux';
+import { EuiLoadingSpinner } from '@elastic/eui';
 import {
   Embeddable,
   IContainer,
@@ -26,7 +27,6 @@ import {
   Query,
   RefreshInterval,
 } from '../../../../../src/plugins/data/public';
-import { GisMap } from '../connected_components/gis_map';
 import { createMapStore, MapStore } from '../reducers/store';
 import { MapSettings } from '../reducers/map';
 import {
@@ -86,6 +86,7 @@ export interface MapEmbeddableOutput extends EmbeddableOutput {
   indexPatterns: IIndexPattern[];
 }
 
+const GisMap = lazy(() => import('../connected_components/gis_map/shim'));
 export class MapEmbeddable extends Embeddable<MapEmbeddableInput, MapEmbeddableOutput> {
   type = MAP_SAVED_OBJECT_TYPE;
 
@@ -254,10 +255,12 @@ export class MapEmbeddable extends Embeddable<MapEmbeddableInput, MapEmbeddableO
     render(
       <Provider store={this._store}>
         <I18nContext>
-          <GisMap
-            addFilters={this.input.hideFilterActions ? null : this.addFilters}
-            renderTooltipContent={this._renderTooltipContent}
-          />
+          <Suspense fallback={<EuiLoadingSpinner />}>
+            <GisMap
+              addFilters={this.input.hideFilterActions ? null : this.addFilters}
+              renderTooltipContent={this._renderTooltipContent}
+            />
+          </Suspense>
         </I18nContext>
       </Provider>,
       this._domNode

x-pack/plugins/maps/public/embeddable/map_embeddable_factory.ts

@@ -7,23 +7,56 @@
 import _ from 'lodash';
 import { i18n } from '@kbn/i18n';
 import { IIndexPattern } from 'src/plugins/data/public';
-// @ts-ignore
-import { getMapsSavedObjectLoader } from '../angular/services/gis_map_saved_object_loader';
-import { MapEmbeddable, MapEmbeddableInput } from './map_embeddable';
-import { getIndexPatternService, getHttp, getMapsCapabilities } from '../kibana_services';
 import {
   EmbeddableFactoryDefinition,
   IContainer,
 } from '../../../../../src/plugins/embeddable/public';
+import '../index.scss';
 
-import { createMapPath, MAP_SAVED_OBJECT_TYPE, APP_ICON } from '../../common/constants';
+let whenModulesLoadedPromise = null;
+
+let getMapsSavedObjectLoader = null;
+let MapEmbeddable;
+let MapEmbeddableInput = null;
+let getIndexPatternService;
+let getHttp;
+let getMapsCapabilities = null;
+let createMapPath;
+let MAP_SAVED_OBJECT_TYPE;
+let APP_ICON = null;
+let createMapStore = null;
+let addLayerWithoutDataSync = null;
+let getQueryableUniqueIndexPatternIds = null;
+let getInitialLayers = null;
+let mergeInputWithSavedMap = null;
+
+async function loadMapDependencies() {
+  if (whenModulesLoadedPromise !== null) {
+    return whenModulesLoadedPromise;
+  }
 
-import { createMapStore } from '../reducers/store';
-import { addLayerWithoutDataSync } from '../actions/map_actions';
-import { getQueryableUniqueIndexPatternIds } from '../selectors/map_selectors';
-import { getInitialLayers } from '../angular/get_initial_layers';
-import { mergeInputWithSavedMap } from './merge_input_with_saved_map';
-import '../index.scss';
+  whenModulesLoadedPromise = new Promise(async resolve => {
+    const lazyModule = await import('./lazy');
+
+    getMapsSavedObjectLoader = lazyModule.getMapsSavedObjectLoader;
+    getQueryableUniqueIndexPatternIds = lazyModule.getQueryableUniqueIndexPatternIds;
+    MapEmbeddable = lazyModule.MapEmbeddable;
+    MapEmbeddableInput = lazyModule.MapEmbeddableInput;
+    getIndexPatternService = lazyModule.getIndexPatternService;
+    getHttp = lazyModule.getHttp;
+    getMapsCapabilities = lazyModule.getMapsCapabilities;
+    createMapPath = lazyModule.createMapPath;
+    MAP_SAVED_OBJECT_TYPE = lazyModule.MAP_SAVED_OBJECT_TYPE;
+    APP_ICON = lazyModule.APP_ICON;
+    createMapStore = lazyModule.createMapStore;
+    addLayerWithoutDataSync = lazyModule.addLayerWithoutDataSync;
+    getInitialLayers = lazyModule.getInitialLayers;
+    mergeInputWithSavedMap = lazyModule.mergeInputWithSavedMap;
+
+    resolve(true);
+  });
+  return await whenModulesLoadedPromise;
+}
 
 export class MapEmbeddableFactory implements EmbeddableFactoryDefinition {
   type = MAP_SAVED_OBJECT_TYPE;
@@ -36,6 +69,7 @@ export class MapEmbeddableFactory implements EmbeddableFactoryDefinition {
   };
 
   async isEditable() {
+    await loadMapDependencies();
     return getMapsCapabilities().save as boolean;
   }
 
@@ -90,6 +124,7 @@ export class MapEmbeddableFactory implements EmbeddableFactoryDefinition {
     input: MapEmbeddableInput,
     parent?: IContainer
   ) => {
+    await loadMapDependencies();
     const savedMap = await this._fetchSavedMap(savedObjectId);
     const layerList = getInitialLayers(savedMap.layerListJSON);
     const indexPatterns = await this._getIndexPatterns(layerList);
@@ -129,6 +164,7 @@ export class MapEmbeddableFactory implements EmbeddableFactoryDefinition {
   };
 
   create = async (input: MapEmbeddableInput, parent?: IContainer) => {
+    await loadMapDependencies();
     const layerList = getInitialLayers();
     const indexPatterns = await this._getIndexPatterns(layerList);
 

x-pack/plugins/maps/public/plugin.ts

@@ -36,11 +36,10 @@ import {
 import { featureCatalogueEntry } from './feature_catalogue_entry';
 // @ts-ignore
 import { getMapsVisTypeAlias } from './maps_vis_type_alias';
-import { registerLayerWizards } from './layers/load_layer_wizards';
 import { HomePublicPluginSetup } from '../../../../src/plugins/home/public';
 import { VisualizationsSetup } from '../../../../src/plugins/visualizations/public';
 import { MAP_SAVED_OBJECT_TYPE } from '../common/constants';
-import { MapEmbeddableFactory } from './embeddable';
+import { MapEmbeddableFactory } from './embeddable/map_embeddable_factory';
 import { EmbeddableSetup } from '../../../../src/plugins/embeddable/public';
 
 export interface MapsPluginSetupDependencies {
@@ -85,7 +84,6 @@ export const bindStartCoreAndPlugins = (core: CoreStart, plugins: any) => {
   setUiActions(plugins.uiActions);
   setNavigation(plugins.navigation);
   setCoreI18n(core.i18n);
-  registerLayerWizards();
 };
 
 /**