[Lens] Reduce initial bundle size (#78142) (#78823)

Author: flash1293

x-pack/plugins/lens/public/app_plugin/_index.scss

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import './app.scss';
+
 import _ from 'lodash';
 import React, { useState, useEffect, useCallback } from 'react';
 import { i18n } from '@kbn/i18n';

x-pack/plugins/lens/public/app_plugin/_app.scss renamed to x-pack/plugins/lens/public/app_plugin/app.scss

@@ -0,0 +1,24 @@
+/*
+ * 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.
+ */
+
+/**
+ * This file re-exports all parts of visualizations and datasources which can be loaded lazily
+ * (to reduce page load bundle size) when Lens is actually accessed via editor or embeddable.
+ *
+ * It's also possible for each visualization and datasource to resolve this locally, but this causes
+ * a burst of bundles being loaded on Lens startup at once (and in some scenarios cascading bundle loads).
+ * This file causes all of them to be served in a single request.
+ */
+
+export * from './datatable_visualization/datatable_visualization';
+export * from './metric_visualization/metric_visualization';
+export * from './pie_visualization/pie_visualization';
+export * from './xy_visualization/xy_visualization';
+
+export * from './indexpattern_datasource/indexpattern';
+
+export * from './editor_frame_service/editor_frame';
+export * from './app_plugin/mounter';

x-pack/plugins/lens/public/app_plugin/app.tsx

@@ -0,0 +1,8 @@
+/*
+ * 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.
+ */
+
+export * from './expression';
+export * from './visualization';

x-pack/plugins/lens/public/async_services.ts

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import './expression.scss';
+
 import React, { useMemo } from 'react';
 import ReactDOM from 'react-dom';
 import { i18n } from '@kbn/i18n';

x-pack/plugins/lens/public/datatable_visualization/_index.scss

@@ -5,9 +5,7 @@
  */
 
 import { CoreSetup } from 'kibana/public';
-import { datatableVisualization } from './visualization';
 import { ExpressionsSetup } from '../../../../../src/plugins/expressions/public';
-import { datatable, datatableColumns, getDatatableRenderer } from './expression';
 import { EditorFrameSetup, FormatFactory } from '../types';
 import { UiActionsStart } from '../../../../../src/plugins/ui_actions/public';
 import { DataPublicPluginStart } from '../../../../../src/plugins/data/public';
@@ -29,16 +27,24 @@ export class DatatableVisualization {
     core: CoreSetup<DatatableVisualizationPluginStartPlugins, void>,
     { expressions, formatFactory, editorFrame }: DatatableVisualizationPluginSetupPlugins
   ) {
-    expressions.registerFunction(() => datatableColumns);
-    expressions.registerFunction(() => datatable);
-    expressions.registerRenderer(() =>
-      getDatatableRenderer({
-        formatFactory,
-        getType: core
-          .getStartServices()
-          .then(([_, { data: dataStart }]) => dataStart.search.aggs.types.get),
-      })
-    );
-    editorFrame.registerVisualization(datatableVisualization);
+    editorFrame.registerVisualization(async () => {
+      const {
+        datatable,
+        datatableColumns,
+        getDatatableRenderer,
+        datatableVisualization,
+      } = await import('../async_services');
+      expressions.registerFunction(() => datatableColumns);
+      expressions.registerFunction(() => datatable);
+      expressions.registerRenderer(() =>
+        getDatatableRenderer({
+          formatFactory,
+          getType: core
+            .getStartServices()
+            .then(([_, { data: dataStart }]) => dataStart.search.aggs.types.get),
+        })
+      );
+      return datatableVisualization;
+    });
   }
 }