Save initial page load size by individually async loading register he…

…lpers that are conditionally run.

x-pack/plugins/ml/public/application/explorer/explorer.tsx

@@ -35,8 +35,8 @@ import type { TimefilterContract } from '@kbn/data-plugin/public';
 import { useStorage } from '@kbn/ml-local-storage';
 import { isDefined } from '@kbn/ml-is-defined';
 import type { TimeBuckets } from '@kbn/ml-time-buckets';
+import { dynamic } from '@kbn/shared-ux-utility';
 import { HelpPopover } from '../components/help_popover';
-import { AnnotationFlyout } from '../components/annotations/annotation_flyout';
 // @ts-ignore
 import { AnnotationsTable } from '../components/annotations/annotations_table';
 import { ExplorerNoJobsSelected, ExplorerNoResultsFound } from './components';
@@ -66,14 +66,9 @@ import {
 import { AnomalyTimeline } from './anomaly_timeline';
 import type { FilterAction } from './explorer_constants';
 import { FILTER_ACTION } from './explorer_constants';
-// Explorer Charts
-// @ts-ignore
-import { ExplorerChartsContainer } from './explorer_charts/explorer_charts_container';
 // Anomalies Table
 // @ts-ignore
 import { AnomaliesTable } from '../components/anomalies_table/anomalies_table';
-// Anomalies Map
-import { AnomaliesMap } from './anomalies_map';
 import { ANOMALY_DETECTION_DEFAULT_TIME_RANGE } from '../../../common/constants/settings';
 import { AnomalyContextMenu } from './anomaly_context_menu';
 import type { JobSelectorProps } from '../components/job_selector/job_selector';
@@ -85,6 +80,18 @@ import { ML_ANOMALY_EXPLORER_PANELS } from '../../../common/types/storage';
 import { AlertsPanel } from './alerts';
 import { useMlIndexUtils } from '../util/index_service';
 
+const AnnotationFlyout = dynamic(async () => ({
+  default: (await import('../components/annotations/annotation_flyout')).AnnotationFlyout,
+}));
+
+const AnomaliesMap = dynamic(async () => ({
+  default: (await import('./anomalies_map')).AnomaliesMap,
+}));
+
+const ExplorerChartsContainer = dynamic(async () => ({
+  default: (await import('./explorer_charts/explorer_charts_container')).ExplorerChartsContainer,
+}));
+
 interface ExplorerPageProps {
   jobSelectorProps: JobSelectorProps;
   noInfluencersConfigured?: boolean;

x-pack/plugins/ml/public/index.ts

@@ -51,7 +51,4 @@ type AwaitReturnType<T> = T extends PromiseLike<infer U> ? U : T;
 export type GetMlSharedImportsReturnType = AwaitReturnType<ReturnType<typeof getMlSharedImports>>;
 
 export { MLJobsAwaitingNodeWarning } from './application/components/jobs_awaiting_node_warning/new_job_awaiting_node_shared';
-export {
-  MlNodeAvailableWarningShared,
-  useMlNodeAvailableCheck,
-} from './application/components/node_available_warning';
+export { MlNodeAvailableWarningShared } from './application/components/node_available_warning';

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

@@ -233,8 +233,6 @@ export class MlPlugin implements Plugin<MlPluginSetup, MlPluginStart> {
               registerEmbeddables,
               registerMlUiActions,
               registerSearchLinks,
-              registerMlAlerts,
-              registerMapExtension,
               registerCasesAttachments,
             } = await import('./register_helper');
             registerSearchLinks(this.appUpdater$, fullLicense, mlCapabilities, this.isServerless);
@@ -245,6 +243,10 @@ export class MlPlugin implements Plugin<MlPluginSetup, MlPluginStart> {
                 // Register rules for basic license to show them in the UI as disabled
                 !fullLicense)
             ) {
+              // This module contains async imports itself, and it is conditionally loaded based on the license. We'll save
+              // traffic if we load it async.
+              const { registerMlAlerts } = await import('./alerting/register_ml_alerts');
+
               registerMlAlerts(
                 pluginsSetup.triggersActionsUi,
                 core.getStartServices,
@@ -264,6 +266,10 @@ export class MlPlugin implements Plugin<MlPluginSetup, MlPluginStart> {
                 }
 
                 if (pluginsSetup.maps) {
+                  // This module contains async imports itself, and it is conditionally loaded if maps is enabled. We'll save
+                  // traffic if we load it async.
+                  const { registerMapExtension } = await import('./maps/register_map_extension');
+
                   // Pass canGetJobs as minimum permission to show anomalies card in maps layers
                   await registerMapExtension(pluginsSetup.maps, core, {
                     canGetJobs: mlCapabilities.canGetJobs,

x-pack/plugins/ml/public/register_helper/index.ts

@@ -5,9 +5,9 @@
  * 2.0.
  */
 
+// These register helper functions have no async imports themselves, so they
+// can be bundled together for a single async chunk.
 export { registerEmbeddables } from '../embeddables';
 export { registerMlUiActions } from '../ui_actions';
 export { registerSearchLinks } from './register_search_links';
-export { registerMlAlerts } from '../alerting';
-export { registerMapExtension } from '../maps/register_map_extension';
 export { registerCasesAttachments } from '../cases';

x-pack/plugins/ml/public/shared.ts

@@ -5,9 +5,7 @@
  * 2.0.
  */
 
-export {
-  FieldStatsFlyoutProvider,
-  useFieldStatsTrigger,
-  FieldStatsInfoButton,
-} from './application/components/field_stats_flyout';
+export { FieldStatsInfoButton } from './application/components/field_stats_flyout/field_stats_info_button';
+export { useFieldStatsTrigger } from './application/components/field_stats_flyout/use_field_stats_trigger';
+export { FieldStatsFlyoutProvider } from './application/components/field_stats_flyout/field_stats_flyout_provider';
 export { useFieldStatsFlyoutContext } from './application/components/field_stats_flyout/use_field_stats_flytout_context';