Skip to content

Commit

Permalink
[Maps] Code split Maps app (elastic#64594)
Browse files Browse the repository at this point in the history
Code-split the maps-plugin to reduce the initial `maps.plugin.js` size.

There were two main code dependencies in the plugin initialization that were the root cause of the large bundle size.

- `GisMap` wraps the entire application UX, including the add-layer-wizard. The layer wizards only need to be available there. This PR moves the `load_layer_wizard` dependency from the plugin-initialization to the `GisMap` component. 
- The `MapEmbeddableFactory` needs to be registered at plugin-initialization. However, this module imports a lot of core-application code. By code-splitting here, we avoid pulling in the entire Maps-app in the main bundle.

This also  introduces a lazy-initialization of the `GisMap` itself as an additional split to further reduce size of the bundles.
  • Loading branch information
thomasneirynck committed May 5, 2020
1 parent 89b0cfd commit 17580dc
Show file tree
Hide file tree
Showing 9 changed files with 138 additions and 52 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,11 @@ import { Filter } from 'src/plugins/data/public';

import { RenderToolTipContent } from '../../layers/tooltips/tooltip_property';

export const GisMap: React.ComponentType<{
declare const GisMap: React.ComponentType<{
addFilters: ((filters: Filter[]) => void) | null;
renderTooltipContent?: RenderToolTipContent;
}>;

export { GisMap };
// eslint-disable-next-line import/no-default-export
export default GisMap;
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
*/

import { connect } from 'react-redux';
import { GisMap } from './view';
import { GisMap as UnconnectedGisMap } from './view';
import { exitFullScreen } from '../../actions/ui_actions';
import { getFlyoutDisplay, getIsFullScreen } from '../../selectors/ui_selectors';
import { triggerRefreshTimer, cancelAllInFlightRequests } from '../../actions/map_actions';
Expand Down Expand Up @@ -42,5 +42,6 @@ function mapDispatchToProps(dispatch) {
};
}

const connectedGisMap = connect(mapStateToProps, mapDispatchToProps)(GisMap);
export { connectedGisMap as GisMap };
const connectedGisMap = connect(mapStateToProps, mapDispatchToProps)(UnconnectedGisMap);
export { connectedGisMap as GisMap }; // GisMap is pulled in by name by the Maps-app itself
export default connectedGisMap; //lazy-loading in the embeddable requires default export
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ 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';

Expand All @@ -36,6 +37,7 @@ export class GisMap extends Component {
this._isMounted = true;
this._isInitalLoadRenderTimerStarted = false;
this._setRefreshTimer();
registerLayerWizards();
}

componentDidUpdate() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,6 @@ function mapStateToProps(state = {}) {
scrollZoom: getScrollZoom(state),
disableInteractive: isInteractiveDisabled(state),
disableTooltipControl: isTooltipControlDisabled(state),
disableTooltipControl: isTooltipControlDisabled(state),
hideViewControl: isViewControlHidden(state),
};
}
Expand Down
18 changes: 18 additions & 0 deletions x-pack/plugins/maps/public/embeddable/lazy/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
/*
* 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.

// @ts-ignore
export * from '../../angular/services/gis_map_saved_object_loader';
export * from '../map_embeddable';
export * from '../../kibana_services';
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';
44 changes: 11 additions & 33 deletions x-pack/plugins/maps/public/embeddable/map_embeddable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,16 @@
*/

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,
EmbeddableInput,
EmbeddableOutput,
} from '../../../../../src/plugins/embeddable/public';
import { APPLY_FILTER_TRIGGER } from '../../../../../src/plugins/ui_actions/public';
Expand All @@ -26,7 +26,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 {
Expand All @@ -43,7 +42,6 @@ import {
setHiddenLayers,
setMapSettings,
} from '../actions/map_actions';
import { MapCenterAndZoom } from '../../common/descriptor_types';
import { setReadOnly, setIsLayerTOCOpen, setOpenTOCDetails } from '../actions/ui_actions';
import { getIsLayerTOCOpen, getOpenTOCDetails } from '../selectors/ui_selectors';
import {
Expand All @@ -56,36 +54,14 @@ import { MAP_SAVED_OBJECT_TYPE } from '../../common/constants';
import { RenderToolTipContent } from '../layers/tooltips/tooltip_property';
import { getUiActions, getCoreI18n } from '../kibana_services';

interface MapEmbeddableConfig {
editUrl?: string;
indexPatterns: IIndexPattern[];
editable: boolean;
title?: string;
layerList: unknown[];
settings?: MapSettings;
}

export interface MapEmbeddableInput extends EmbeddableInput {
timeRange?: TimeRange;
filters: Filter[];
query?: Query;
refreshConfig: RefreshInterval;
isLayerTOCOpen: boolean;
openTOCDetails?: string[];
disableTooltipControl?: boolean;
disableInteractive?: boolean;
hideToolbarOverlay?: boolean;
hideLayerControl?: boolean;
hideViewControl?: boolean;
mapCenter?: MapCenterAndZoom;
hiddenLayers?: string[];
hideFilterActions?: boolean;
}
import { MapEmbeddableInput, MapEmbeddableConfig } from './types';
export { MapEmbeddableInput, MapEmbeddableConfig };

export interface MapEmbeddableOutput extends EmbeddableOutput {
indexPatterns: IIndexPattern[];
}

const GisMap = lazy(() => import('../connected_components/gis_map'));
export class MapEmbeddable extends Embeddable<MapEmbeddableInput, MapEmbeddableOutput> {
type = MAP_SAVED_OBJECT_TYPE;

Expand Down Expand Up @@ -254,10 +230,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
Expand Down
71 changes: 59 additions & 12 deletions x-pack/plugins/maps/public/embeddable/map_embeddable_factory.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,67 @@

import _ from 'lodash';
import { i18n } from '@kbn/i18n';
import { AnyAction } from 'redux';
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 {
Embeddable,
EmbeddableFactoryDefinition,
IContainer,
} from '../../../../../src/plugins/embeddable/public';

import '../index.scss';
import { createMapPath, MAP_SAVED_OBJECT_TYPE, APP_ICON } from '../../common/constants';
import { MapStore, MapStoreState } from '../reducers/store';
import { MapEmbeddableConfig, MapEmbeddableInput } from './types';
import { MapEmbeddableOutput } from './map_embeddable';
import { RenderToolTipContent } from '../layers/tooltips/tooltip_property';
import { EventHandlers } from '../reducers/non_serializable_instances';

let whenModulesLoadedPromise: Promise<boolean>;

let getMapsSavedObjectLoader: any;
let MapEmbeddable: new (
config: MapEmbeddableConfig,
initialInput: MapEmbeddableInput,
parent?: IContainer,
renderTooltipContent?: RenderToolTipContent,
eventHandlers?: EventHandlers
) => Embeddable<MapEmbeddableInput, MapEmbeddableOutput>;

let getIndexPatternService: () => {
get: (id: string) => IIndexPattern | undefined;
};
let getHttp: () => any;
let getMapsCapabilities: () => any;
let createMapStore: () => MapStore;
let addLayerWithoutDataSync: (layerDescriptor: unknown) => AnyAction;
let getQueryableUniqueIndexPatternIds: (state: MapStoreState) => string[];
let getInitialLayers: (layerListJSON?: string, initialLayers?: unknown[]) => unknown[];
let mergeInputWithSavedMap: any;

async function waitForMapDependencies(): Promise<boolean> {
if (typeof whenModulesLoadedPromise !== 'undefined') {
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 => {
({
// @ts-ignore
getMapsSavedObjectLoader,
getQueryableUniqueIndexPatternIds,
MapEmbeddable,
getIndexPatternService,
getHttp,
getMapsCapabilities,
createMapStore,
addLayerWithoutDataSync,
getInitialLayers,
mergeInputWithSavedMap,
} = await import('./lazy'));

resolve(true);
});
return whenModulesLoadedPromise;
}

export class MapEmbeddableFactory implements EmbeddableFactoryDefinition {
type = MAP_SAVED_OBJECT_TYPE;
Expand All @@ -36,6 +79,7 @@ export class MapEmbeddableFactory implements EmbeddableFactoryDefinition {
};

async isEditable() {
await waitForMapDependencies();
return getMapsCapabilities().save as boolean;
}

Expand All @@ -53,7 +97,7 @@ export class MapEmbeddableFactory implements EmbeddableFactoryDefinition {
async _getIndexPatterns(layerList: unknown[]): Promise<IIndexPattern[]> {
// Need to extract layerList from store to get queryable index pattern ids
const store = createMapStore();
let queryableIndexPatternIds;
let queryableIndexPatternIds: string[];
try {
layerList.forEach((layerDescriptor: unknown) => {
store.dispatch(addLayerWithoutDataSync(layerDescriptor));
Expand All @@ -69,6 +113,7 @@ export class MapEmbeddableFactory implements EmbeddableFactoryDefinition {

const promises = queryableIndexPatternIds.map(async indexPatternId => {
try {
// @ts-ignore
return await getIndexPatternService().get(indexPatternId);
} catch (error) {
// Unable to load index pattern, better to not throw error so map embeddable can render
Expand All @@ -90,6 +135,7 @@ export class MapEmbeddableFactory implements EmbeddableFactoryDefinition {
input: MapEmbeddableInput,
parent?: IContainer
) => {
await waitForMapDependencies();
const savedMap = await this._fetchSavedMap(savedObjectId);
const layerList = getInitialLayers(savedMap.layerListJSON);
const indexPatterns = await this._getIndexPatterns(layerList);
Expand Down Expand Up @@ -129,6 +175,7 @@ export class MapEmbeddableFactory implements EmbeddableFactoryDefinition {
};

create = async (input: MapEmbeddableInput, parent?: IContainer) => {
await waitForMapDependencies();
const layerList = getInitialLayers();
const indexPatterns = await this._getIndexPatterns(layerList);

Expand Down
38 changes: 38 additions & 0 deletions x-pack/plugins/maps/public/embeddable/types.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
/*
* 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 { IIndexPattern } from '../../../../../src/plugins/data/common/index_patterns';
import { MapSettings } from '../reducers/map';
// eslint-disable-next-line @kbn/eslint/no-restricted-paths
import { EmbeddableInput } from '../../../../../src/plugins/embeddable/public/lib/embeddables';
import { Filter, Query, RefreshInterval, TimeRange } from '../../../../../src/plugins/data/common';
import { MapCenterAndZoom } from '../../common/descriptor_types';

export interface MapEmbeddableConfig {
editUrl?: string;
indexPatterns: IIndexPattern[];
editable: boolean;
title?: string;
layerList: unknown[];
settings?: MapSettings;
}

export interface MapEmbeddableInput extends EmbeddableInput {
timeRange?: TimeRange;
filters: Filter[];
query?: Query;
refreshConfig: RefreshInterval;
isLayerTOCOpen: boolean;
openTOCDetails?: string[];
disableTooltipControl?: boolean;
disableInteractive?: boolean;
hideToolbarOverlay?: boolean;
hideLayerControl?: boolean;
hideViewControl?: boolean;
mapCenter?: MapCenterAndZoom;
hiddenLayers?: string[];
hideFilterActions?: boolean;
}
3 changes: 1 addition & 2 deletions x-pack/plugins/maps/public/plugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ import { HomePublicPluginSetup } from '../../../../src/plugins/home/public';
import { VisualizationsSetup } from '../../../../src/plugins/visualizations/public';
import { registerLayerWizards } from './layers/load_layer_wizards';
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 {
Expand Down Expand Up @@ -85,7 +85,6 @@ export const bindStartCoreAndPlugins = (core: CoreStart, plugins: any) => {
setUiActions(plugins.uiActions);
setNavigation(plugins.navigation);
setCoreI18n(core.i18n);
registerLayerWizards();
};

/**
Expand Down

0 comments on commit 17580dc

Please sign in to comment.