From 8e0eb2818407b121c0fc490f3f64009e46a99b37 Mon Sep 17 00:00:00 2001 From: Clint Andrew Hall Date: Fri, 5 Apr 2024 11:41:58 -0400 Subject: [PATCH] Save initial page load size by individually async loading register helpers that are conditionally run. --- .../public/application/explorer/explorer.tsx | 19 +++++++++++++------ x-pack/plugins/ml/public/index.ts | 5 +---- x-pack/plugins/ml/public/plugin.ts | 10 ++++++++-- .../ml/public/register_helper/index.ts | 4 ++-- x-pack/plugins/ml/public/shared.ts | 8 +++----- 5 files changed, 27 insertions(+), 19 deletions(-) diff --git a/x-pack/plugins/ml/public/application/explorer/explorer.tsx b/x-pack/plugins/ml/public/application/explorer/explorer.tsx index a7c9277edf116..c88711b0279f3 100644 --- a/x-pack/plugins/ml/public/application/explorer/explorer.tsx +++ b/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; diff --git a/x-pack/plugins/ml/public/index.ts b/x-pack/plugins/ml/public/index.ts index 40f1d0aaf2803..7bda516428dc2 100755 --- a/x-pack/plugins/ml/public/index.ts +++ b/x-pack/plugins/ml/public/index.ts @@ -51,7 +51,4 @@ type AwaitReturnType = T extends PromiseLike ? U : T; export type GetMlSharedImportsReturnType = AwaitReturnType>; 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'; diff --git a/x-pack/plugins/ml/public/plugin.ts b/x-pack/plugins/ml/public/plugin.ts index b30983e07768a..675a28c64d15e 100644 --- a/x-pack/plugins/ml/public/plugin.ts +++ b/x-pack/plugins/ml/public/plugin.ts @@ -233,8 +233,6 @@ export class MlPlugin implements Plugin { 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 { // 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 { } 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, diff --git a/x-pack/plugins/ml/public/register_helper/index.ts b/x-pack/plugins/ml/public/register_helper/index.ts index ed5b8d1078fd5..aa4e53df523f1 100644 --- a/x-pack/plugins/ml/public/register_helper/index.ts +++ b/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'; diff --git a/x-pack/plugins/ml/public/shared.ts b/x-pack/plugins/ml/public/shared.ts index 69ba96cb3b8f2..fec15f3181a84 100644 --- a/x-pack/plugins/ml/public/shared.ts +++ b/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';