[visualizations] Reduce page load bundle to under 100kB

src/plugins/visualizations/public/components/index.ts

@@ -6,4 +6,6 @@
  * Side Public License, v 1.
  */
 
-export { VisualizationContainer } from './visualization_container';
+import { lazy } from 'react';
+
+export const VisualizationContainer = lazy(() => import('./visualization_container'));

src/plugins/visualizations/public/components/visualization_container.tsx

@@ -13,7 +13,7 @@ import { VisualizationNoResults } from './visualization_noresults';
 import { VisualizationError } from './visualization_error';
 import { IInterpreterRenderHandlers } from '../../../expressions/common';
 
-interface VisualizationContainerProps {
+export interface VisualizationContainerProps {
   'data-test-subj'?: string;
   className?: string;
   children: ReactNode;
@@ -52,3 +52,6 @@ export const VisualizationContainer = ({
     </div>
   );
 };
+
+// eslint-disable-next-line import/no-default-export
+export default VisualizationContainer;

src/plugins/visualizations/public/embeddable/visualize_embeddable_factory.tsx

@@ -7,12 +7,12 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import { SavedObjectMetaData, OnSaveProps } from 'src/plugins/saved_objects/public';
 import { first } from 'rxjs/operators';
-import { EmbeddableStateWithType } from 'src/plugins/embeddable/common';
-import { SavedObjectAttributes } from '../../../../core/public';
+import type { SavedObjectMetaData, OnSaveProps } from 'src/plugins/saved_objects/public';
+import type { EmbeddableStateWithType } from 'src/plugins/embeddable/common';
+
 import { extractSearchSourceReferences } from '../../../data/public';
-import { SavedObjectReference } from '../../../../core/public';
+import type { SavedObjectAttributes, SavedObjectReference } from '../../../../core/public';
 
 import {
   EmbeddableFactoryDefinition,
@@ -21,7 +21,7 @@ import {
   IContainer,
   AttributeService,
 } from '../../../embeddable/public';
-import { DisabledLabEmbeddable } from './disabled_lab_embeddable';
+import type { DisabledLabEmbeddable } from './disabled_lab_embeddable';
 import {
   VisualizeByReferenceInput,
   VisualizeByValueInput,
@@ -31,7 +31,8 @@ import {
   VisualizeSavedObjectAttributes,
 } from './visualize_embeddable';
 import { VISUALIZE_EMBEDDABLE_TYPE } from './constants';
-import { SerializedVis, Vis } from '../vis';
+import type { SerializedVis, Vis } from '../vis';
+import { createVisAsync } from '../vis_lazy';
 import {
   getCapabilities,
   getTypes,
@@ -47,10 +48,10 @@ import {
   injectControlsReferences,
 } from '../saved_visualizations/saved_visualization_references';
 import { createVisEmbeddableFromObject } from './create_vis_embeddable_from_object';
-import { StartServicesGetter } from '../../../kibana_utils/public';
-import { VisualizationsStartDeps } from '../plugin';
 import { VISUALIZE_ENABLE_LABS_SETTING } from '../../common/constants';
 import { checkForDuplicateTitle } from '../../../saved_objects/public';
+import type { StartServicesGetter } from '../../../kibana_utils/public';
+import type { VisualizationsStartDeps } from '../plugin';
 
 interface VisualizationAttributes extends SavedObjectAttributes {
   visState: string;
@@ -147,8 +148,8 @@ export class VisualizeEmbeddableFactory
     try {
       const savedObject = await savedVisualizations.get(savedObjectId);
       const visState = convertToSerializedVis(savedObject);
-      const vis = new Vis(savedObject.visState.type, visState);
-      await vis.setState(visState);
+      const vis = await createVisAsync(savedObject.visState.type, visState);
+
       return createVisEmbeddableFromObject(this.deps)(
         vis,
         input,
@@ -167,8 +168,7 @@ export class VisualizeEmbeddableFactory
     // to allow for in place creation of visualizations without having to navigate away to a new URL.
     if (input.savedVis) {
       const visState = input.savedVis;
-      const vis = new Vis(visState.type, visState);
-      await vis.setState(visState);
+      const vis = await createVisAsync(visState.type, visState);
       const savedVisualizations = getSavedVisualizationsLoader();
       return createVisEmbeddableFromObject(this.deps)(
         vis,

src/plugins/visualizations/public/index.ts

@@ -16,23 +16,22 @@ export function plugin(initializerContext: PluginInitializerContext) {
 }
 
 /** @public static code */
-export { Vis } from './vis';
 export { TypesService } from './vis_types/types_service';
 export { VISUALIZE_EMBEDDABLE_TYPE, VIS_EVENT_TO_TRIGGER } from './embeddable';
 export { VisualizationContainer } from './components';
 export { getVisSchemas } from './vis_schemas';
 
 /** @public types */
 export { VisualizationsSetup, VisualizationsStart };
-export { VisGroups } from './vis_types';
+export { VisGroups } from './vis_types/vis_groups_enum';
 export type { BaseVisType, VisTypeAlias, VisTypeDefinition, Schema, ISchemas } from './vis_types';
-export { SerializedVis, SerializedVisData, VisData } from './vis';
+export type { Vis, SerializedVis, SerializedVisData, VisData } from './vis';
 export type VisualizeEmbeddableFactoryContract = PublicContract<VisualizeEmbeddableFactory>;
 export type VisualizeEmbeddableContract = PublicContract<VisualizeEmbeddable>;
 export { VisualizeInput } from './embeddable';
 export { SchemaConfig } from './vis_schemas';
 export { updateOldState } from './legacy/vis_update_state';
-export { PersistedState } from './persisted_state';
+export type { PersistedState } from './persisted_state';
 export {
   ISavedVis,
   VisSavedObject,

src/plugins/visualizations/public/plugin.ts

@@ -8,15 +8,6 @@
 
 import './index.scss';
 
-import {
-  PluginInitializerContext,
-  CoreSetup,
-  CoreStart,
-  Plugin,
-  ApplicationStart,
-  SavedObjectsClientContract,
-} from '../../../core/public';
-import { TypesService, TypesSetup, TypesStart } from './vis_types';
 import {
   setUISettings,
   setTypes,
@@ -42,27 +33,42 @@ import {
   VisualizeEmbeddableFactory,
   createVisEmbeddableFromObject,
 } from './embeddable';
-import { ExpressionsSetup, ExpressionsStart } from '../../expressions/public';
-import { EmbeddableSetup, EmbeddableStart } from '../../embeddable/public';
+import { TypesService } from './vis_types/types_service';
 import { range as rangeExpressionFunction } from './expression_functions/range';
 import { visDimension as visDimensionExpressionFunction } from './expression_functions/vis_dimension';
-import { DataPublicPluginSetup, DataPublicPluginStart } from '../../../plugins/data/public';
-import {
-  Setup as InspectorSetup,
-  Start as InspectorStart,
-} from '../../../plugins/inspector/public';
-import { UsageCollectionSetup } from '../../usage_collection/public';
+
 import { createStartServicesGetter, StartServicesGetter } from '../../kibana_utils/public';
 import { createSavedVisLoader, SavedVisualizationsLoader } from './saved_visualizations';
-import { SerializedVis, Vis } from './vis';
+import type { SerializedVis, Vis } from './vis';
 import { showNewVisModal } from './wizard';
-import { UiActionsStart } from '../../ui_actions/public';
+
 import {
   convertFromSerializedVis,
   convertToSerializedVis,
 } from './saved_visualizations/_saved_vis';
+
 import { createSavedSearchesLoader } from '../../discover/public';
-import { SavedObjectsStart } from '../../saved_objects/public';
+
+import type {
+  PluginInitializerContext,
+  CoreSetup,
+  CoreStart,
+  Plugin,
+  ApplicationStart,
+  SavedObjectsClientContract,
+} from '../../../core/public';
+import type { UsageCollectionSetup } from '../../usage_collection/public';
+import type { UiActionsStart } from '../../ui_actions/public';
+import type { SavedObjectsStart } from '../../saved_objects/public';
+import type { TypesSetup, TypesStart } from './vis_types';
+import type {
+  Setup as InspectorSetup,
+  Start as InspectorStart,
+} from '../../../plugins/inspector/public';
+import type { DataPublicPluginSetup, DataPublicPluginStart } from '../../../plugins/data/public';
+import type { ExpressionsSetup, ExpressionsStart } from '../../expressions/public';
+import type { EmbeddableSetup, EmbeddableStart } from '../../embeddable/public';
+import { createVisAsync } from './vis_lazy';
 
 /**
  * Interface for this plugin's returned setup/start contracts.
@@ -180,11 +186,8 @@ export class VisualizationsPlugin
        * @param {IIndexPattern} indexPattern - index pattern to use
        * @param {VisState} visState - visualization configuration
        */
-      createVis: async (visType: string, visState: SerializedVis) => {
-        const vis = new Vis(visType);
-        await vis.setState(visState);
-        return vis;
-      },
+      createVis: async (visType: string, visState: SerializedVis) =>
+        await createVisAsync(visType, visState),
       convertToSerializedVis,
       convertFromSerializedVis,
       savedVisualizationsLoader,

src/plugins/visualizations/public/saved_visualizations/find_list_items.ts

@@ -14,7 +14,7 @@ import {
   SavedObjectsFindOptions,
 } from '../../../../core/public';
 import { SavedObjectLoader } from '../../../../plugins/saved_objects/public';
-import { VisTypeAlias } from '../vis_types';
+import type { VisTypeAlias } from '../vis_types';
 import { VisualizationsAppExtension } from '../vis_types/vis_type_alias_registry';
 
 /**

src/plugins/visualizations/public/saved_visualizations/saved_visualizations.ts

@@ -10,7 +10,7 @@ import { SavedObjectReference, SavedObjectsFindOptionsReference } from 'kibana/p
 import { SavedObjectLoader } from '../../../../plugins/saved_objects/public';
 import { findListItems } from './find_list_items';
 import { createSavedVisClass, SavedVisServices } from './_saved_vis';
-import { TypesStart } from '../vis_types';
+import type { TypesStart } from '../vis_types';
 
 export interface SavedVisServicesWithVisualizations extends SavedVisServices {
   visualizationTypes: TypesStart;

src/plugins/visualizations/public/services.ts

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import {
+import type {
   ApplicationStart,
   Capabilities,
   ChromeStart,
@@ -16,7 +16,7 @@ import {
   SavedObjectsStart,
   DocLinksStart,
 } from '../../../core/public';
-import { TypesStart } from './vis_types';
+import type { TypesStart } from './vis_types';
 import { createGetterSetter } from '../../../plugins/kibana_utils/public';
 import { DataPublicPluginStart, TimefilterContract } from '../../../plugins/data/public';
 import { UsageCollectionSetup } from '../../../plugins/usage_collection/public';

src/plugins/visualizations/public/types.ts

@@ -15,11 +15,11 @@ import {
 } from '../../../plugins/data/public';
 import { ExpressionAstExpression } from '../../expressions/public';
 
-import { SerializedVis, Vis } from './vis';
-import { PersistedState } from './persisted_state';
-import { VisParams } from '../common';
+import type { SerializedVis, Vis } from './vis';
+import type { PersistedState } from './persisted_state';
+import type { VisParams } from '../common';
 
-export { Vis, SerializedVis, VisParams };
+export type { Vis, SerializedVis, VisParams };
 export interface SavedVisState {
   title: string;
   type: string;

src/plugins/visualizations/public/vis.ts

@@ -213,3 +213,6 @@ export class Vis<TVisParams = VisParams> {
     return newConfigs;
   }
 }
+
+// eslint-disable-next-line import/no-default-export
+export default Vis;

src/plugins/visualizations/public/vis_lazy.ts

@@ -0,0 +1,20 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { SerializedVis } from './vis';
+import type { VisParams } from '../common';
+
+export const createVisAsync = async <TVisParams = VisParams>(
+  visType: string,
+  visState: SerializedVis<TVisParams> = {} as any
+) => {
+  const { Vis } = await import('./vis');
+  const vis = new Vis(visType, visState);
+  await vis.setState(visState);
+  return vis;
+};

src/plugins/visualizations/public/vis_types/base_vis_type.ts

@@ -8,8 +8,9 @@
 
 import { defaultsDeep } from 'lodash';
 
-import { VisParams } from '../types';
-import { VisTypeDefinition, VisTypeOptions, VisGroups } from './types';
+import type { VisParams } from '../types';
+import type { VisTypeDefinition, VisTypeOptions } from './types';
+import { VisGroups } from './vis_groups_enum';
 import { Schemas } from './schemas';
 
 const defaultOptions: VisTypeOptions = {

src/plugins/visualizations/public/vis_types/index.ts

@@ -8,6 +8,6 @@
 
 export * from './types_service';
 export { Schemas } from './schemas';
-export { VisGroups } from './types';
+export { VisGroups } from './vis_groups_enum';
 export { BaseVisType } from './base_vis_type';
 export type { VisTypeDefinition, ISchemas, Schema } from './types';

src/plugins/visualizations/public/vis_types/types.ts

@@ -6,11 +6,12 @@
  * Side Public License, v 1.
  */
 
-import { IconType } from '@elastic/eui';
-import { ReactNode } from 'react';
-import { Adapters } from 'src/plugins/inspector';
-import { IndexPattern, AggGroupNames, AggParam, AggGroupName } from '../../../data/public';
-import { Vis, VisEditorOptionsProps, VisParams, VisToExpressionAst } from '../types';
+import type { IconType } from '@elastic/eui';
+import type { ReactNode } from 'react';
+import type { Adapters } from 'src/plugins/inspector';
+import type { IndexPattern, AggGroupNames, AggParam, AggGroupName } from '../../../data/public';
+import type { Vis, VisEditorOptionsProps, VisParams, VisToExpressionAst } from '../types';
+import { VisGroups } from './vis_groups_enum';
 
 export interface VisTypeOptions {
   showTimePicker: boolean;
@@ -20,12 +21,6 @@ export interface VisTypeOptions {
   hierarchicalData: boolean;
 }
 
-export enum VisGroups {
-  PROMOTED = 'promoted',
-  TOOLS = 'tools',
-  AGGBASED = 'aggbased',
-}
-
 export interface ISchemas {
   [AggGroupNames.Buckets]: Schema[];
   [AggGroupNames.Metrics]: Schema[];

src/plugins/visualizations/public/vis_types/types_service.ts

@@ -8,7 +8,8 @@
 
 import { visTypeAliasRegistry, VisTypeAlias } from './vis_type_alias_registry';
 import { BaseVisType } from './base_vis_type';
-import { VisTypeDefinition, VisGroups } from './types';
+import { VisTypeDefinition } from './types';
+import { VisGroups } from './vis_groups_enum';
 
 /**
  * Vis Types Service

src/plugins/visualizations/public/vis_types/vis_groups_enum.ts

@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export enum VisGroups {
+  PROMOTED = 'promoted',
+  TOOLS = 'tools',
+  AGGBASED = 'aggbased',
+}

src/plugins/visualizations/public/wizard/agg_based_selection/agg_based_selection.tsx

@@ -25,8 +25,8 @@ import {
 } from '@elastic/eui';
 
 import { memoizeLast } from '../../legacy/memoize';
+import { VisGroups } from '../../vis_types/vis_groups_enum';
 import type { BaseVisType, TypesStart } from '../../vis_types';
-import { VisGroups } from '../../vis_types';
 import { DialogNavigation } from '../dialog_navigation';
 
 interface VisTypeListEntry {

src/plugins/visualizations/public/wizard/group_selection/group_selection.tsx

@@ -29,9 +29,9 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { DocLinksStart } from '../../../../../core/public';
-import { VisTypeAlias } from '../../vis_types/vis_type_alias_registry';
 import type { BaseVisType, TypesStart } from '../../vis_types';
-import { VisGroups } from '../../vis_types';
+import { VisGroups } from '../../vis_types/vis_groups_enum';
+import type { VisTypeAlias } from '../../vis_types/vis_type_alias_registry';
 import './group_selection.scss';
 
 interface GroupSelectionProps {

src/plugins/visualizations/public/wizard/new_vis_modal.test.tsx

@@ -8,11 +8,10 @@
 
 import React from 'react';
 import { mountWithIntl } from '@kbn/test/jest';
-import { TypesStart, VisGroups } from '../vis_types';
+import { TypesStart, VisGroups, BaseVisType } from '../vis_types';
 import NewVisModal from './new_vis_modal';
 import { ApplicationStart, SavedObjectsStart, DocLinksStart } from '../../../../core/public';
 import { embeddablePluginMock } from '../../../embeddable/public/mocks';
-import { BaseVisType } from '../vis_types';
 
 describe('NewVisModal', () => {
   const defaultVisTypeParams = {