diff --git a/x-pack/plugins/ml/public/application/routing/routes/aiops/change_point_detection.tsx b/x-pack/plugins/ml/public/application/routing/routes/aiops/change_point_detection.tsx
index ac36478d490de..13bdf1f77f756 100644
--- a/x-pack/plugins/ml/public/application/routing/routes/aiops/change_point_detection.tsx
+++ b/x-pack/plugins/ml/public/application/routing/routes/aiops/change_point_detection.tsx
@@ -9,6 +9,7 @@ import { CHANGE_POINT_DETECTION_ENABLED } from '@kbn/aiops-change-point-detectio
 import { i18n } from '@kbn/i18n';
 import type { FC } from 'react';
 import React from 'react';
+import { dynamic } from '@kbn/shared-ux-utility';
 import { DataSourceContextProvider } from '../../../contexts/ml';
 import { ML_PAGES } from '../../../../locator';
 import type { NavigateToPath } from '../../../contexts/kibana';
@@ -16,7 +17,10 @@ import type { MlRoute } from '../..';
 import { getBreadcrumbWithUrlForApp } from '../../breadcrumbs';
 import { createPath, PageLoader } from '../../router';
 import { useRouteResolver } from '../../use_resolver';
-import { ChangePointDetectionPage as Page } from '../../../aiops';
+
+const Page = dynamic(async () => ({
+  default: (await import('../../../aiops')).ChangePointDetectionPage,
+}));
 
 export const changePointDetectionRouteFactory = (
   navigateToPath: NavigateToPath,
diff --git a/x-pack/plugins/ml/public/application/routing/routes/aiops/log_categorization.tsx b/x-pack/plugins/ml/public/application/routing/routes/aiops/log_categorization.tsx
index 49f3a331eb0f9..2804c120f21b6 100644
--- a/x-pack/plugins/ml/public/application/routing/routes/aiops/log_categorization.tsx
+++ b/x-pack/plugins/ml/public/application/routing/routes/aiops/log_categorization.tsx
@@ -8,15 +8,19 @@
 import type { FC } from 'react';
 import React from 'react';
 import { i18n } from '@kbn/i18n';
+import { dynamic } from '@kbn/shared-ux-utility';
 import { ML_PAGES } from '../../../../locator';
 import type { NavigateToPath } from '../../../contexts/kibana';
 import type { MlRoute } from '../../router';
 import { createPath, PageLoader } from '../../router';
 import { useRouteResolver } from '../../use_resolver';
-import { LogCategorizationPage as Page } from '../../../aiops/log_categorization';
 import { getBreadcrumbWithUrlForApp } from '../../breadcrumbs';
 import { DataSourceContextProvider } from '../../../contexts/ml';
 
+const Page = dynamic(async () => ({
+  default: (await import('../../../aiops/log_categorization')).LogCategorizationPage,
+}));
+
 export const logCategorizationRouteFactory = (
   navigateToPath: NavigateToPath,
   basePath: string
diff --git a/x-pack/plugins/ml/public/application/routing/routes/aiops/log_rate_analysis.tsx b/x-pack/plugins/ml/public/application/routing/routes/aiops/log_rate_analysis.tsx
index b2385b443937e..a4441821a97e0 100644
--- a/x-pack/plugins/ml/public/application/routing/routes/aiops/log_rate_analysis.tsx
+++ b/x-pack/plugins/ml/public/application/routing/routes/aiops/log_rate_analysis.tsx
@@ -9,15 +9,19 @@ import type { FC } from 'react';
 import React from 'react';
 import { useLocation, Redirect } from 'react-router-dom';
 import { i18n } from '@kbn/i18n';
+import { dynamic } from '@kbn/shared-ux-utility';
 import { ML_PAGES } from '../../../../locator';
 import type { NavigateToPath } from '../../../contexts/kibana';
 import type { MlRoute } from '../../router';
 import { createPath, PageLoader } from '../../router';
 import { useRouteResolver } from '../../use_resolver';
-import { LogRateAnalysisPage as Page } from '../../../aiops/log_rate_analysis';
 import { getBreadcrumbWithUrlForApp } from '../../breadcrumbs';
 import { DataSourceContextProvider } from '../../../contexts/ml';
 
+const Page = dynamic(async () => ({
+  default: (await import('../../../aiops/log_rate_analysis')).LogRateAnalysisPage,
+}));
+
 export const logRateAnalysisRouteFactory = (
   navigateToPath: NavigateToPath,
   basePath: string
diff --git a/x-pack/plugins/ml/public/application/routing/routes/datavisualizer/data_comparison.tsx b/x-pack/plugins/ml/public/application/routing/routes/datavisualizer/data_comparison.tsx
index 96afc32a1895a..c9de2de9472a4 100644
--- a/x-pack/plugins/ml/public/application/routing/routes/datavisualizer/data_comparison.tsx
+++ b/x-pack/plugins/ml/public/application/routing/routes/datavisualizer/data_comparison.tsx
@@ -8,7 +8,7 @@
 import type { FC } from 'react';
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { DataDriftPage } from '../../../datavisualizer/data_drift/data_drift_page';
+import { dynamic } from '@kbn/shared-ux-utility';
 import { DataSourceContextProvider } from '../../../contexts/ml';
 import { ML_PAGES } from '../../../../locator';
 import type { NavigateToPath } from '../../../contexts/kibana';
@@ -23,6 +23,10 @@ import {
 } from '../../breadcrumbs';
 import { basicResolvers } from '../../resolvers';
 
+const DataDriftPage = dynamic(async () => ({
+  default: (await import('../../../datavisualizer/data_drift/data_drift_page')).DataDriftPage,
+}));
+
 export const dataDriftRouteFactory = (
   navigateToPath: NavigateToPath,
   basePath: string
diff --git a/x-pack/plugins/ml/public/application/routing/routes/datavisualizer/datavisualizer.tsx b/x-pack/plugins/ml/public/application/routing/routes/datavisualizer/datavisualizer.tsx
index d5bca134cecfe..9b3256b9623d1 100644
--- a/x-pack/plugins/ml/public/application/routing/routes/datavisualizer/datavisualizer.tsx
+++ b/x-pack/plugins/ml/public/application/routing/routes/datavisualizer/datavisualizer.tsx
@@ -8,14 +8,18 @@
 import type { FC } from 'react';
 import React from 'react';
 import { i18n } from '@kbn/i18n';
+import { dynamic } from '@kbn/shared-ux-utility';
 import { ML_PAGES } from '../../../../locator';
 import type { NavigateToPath } from '../../../contexts/kibana';
 import type { MlRoute } from '../../router';
 import { createPath, PageLoader } from '../../router';
 import { useRouteResolver } from '../../use_resolver';
-import { DatavisualizerSelector } from '../../../datavisualizer';
 import { getBreadcrumbWithUrlForApp } from '../../breadcrumbs';
 
+const DatavisualizerSelector = dynamic(async () => ({
+  default: (await import('../../../datavisualizer')).DatavisualizerSelector,
+}));
+
 export const selectorRouteFactory = (
   navigateToPath: NavigateToPath,
   basePath: string
diff --git a/x-pack/plugins/ml/public/application/routing/routes/datavisualizer/file_based.tsx b/x-pack/plugins/ml/public/application/routing/routes/datavisualizer/file_based.tsx
index 9e6117141e32f..e56c65511860b 100644
--- a/x-pack/plugins/ml/public/application/routing/routes/datavisualizer/file_based.tsx
+++ b/x-pack/plugins/ml/public/application/routing/routes/datavisualizer/file_based.tsx
@@ -8,15 +8,19 @@
 import type { FC } from 'react';
 import React from 'react';
 import { i18n } from '@kbn/i18n';
+import { dynamic } from '@kbn/shared-ux-utility';
 import { ML_PAGES } from '../../../../locator';
 import type { NavigateToPath } from '../../../contexts/kibana';
 import type { MlRoute } from '../../router';
 import { createPath, PageLoader } from '../../router';
 import { useRouteResolver } from '../../use_resolver';
-import { FileDataVisualizerPage } from '../../../datavisualizer/file_based';
 
 import { getBreadcrumbWithUrlForApp } from '../../breadcrumbs';
 
+const FileDataVisualizerPage = dynamic(async () => ({
+  default: (await import('../../../datavisualizer/file_based')).FileDataVisualizerPage,
+}));
+
 export const fileBasedRouteFactory = (
   navigateToPath: NavigateToPath,
   basePath: string
diff --git a/x-pack/plugins/ml/public/application/routing/routes/datavisualizer/index_based.tsx b/x-pack/plugins/ml/public/application/routing/routes/datavisualizer/index_based.tsx
index b31b41d17a657..08043e4498857 100644
--- a/x-pack/plugins/ml/public/application/routing/routes/datavisualizer/index_based.tsx
+++ b/x-pack/plugins/ml/public/application/routing/routes/datavisualizer/index_based.tsx
@@ -8,15 +8,20 @@
 import type { FC } from 'react';
 import React from 'react';
 import { i18n } from '@kbn/i18n';
+import { dynamic } from '@kbn/shared-ux-utility';
 import { ML_PAGES } from '../../../../locator';
 import type { NavigateToPath } from '../../../contexts/kibana';
 import type { MlRoute } from '../../router';
 import { createPath, PageLoader } from '../../router';
 import { useRouteResolver } from '../../use_resolver';
-import { IndexDataVisualizerPage as Page } from '../../../datavisualizer/index_based/index_data_visualizer';
 import { getBreadcrumbWithUrlForApp } from '../../breadcrumbs';
 import { DataSourceContextProvider } from '../../../contexts/ml';
 
+const Page = dynamic(async () => ({
+  default: (await import('../../../datavisualizer/index_based/index_data_visualizer'))
+    .IndexDataVisualizerPage,
+}));
+
 export const indexBasedRouteFactory = (
   navigateToPath: NavigateToPath,
   basePath: string
diff --git a/x-pack/plugins/ml/public/application/routing/routes/settings/calendar_list.tsx b/x-pack/plugins/ml/public/application/routing/routes/settings/calendar_list.tsx
index 28f7259cbcedb..088c403378de0 100644
--- a/x-pack/plugins/ml/public/application/routing/routes/settings/calendar_list.tsx
+++ b/x-pack/plugins/ml/public/application/routing/routes/settings/calendar_list.tsx
@@ -9,6 +9,7 @@ import type { FC } from 'react';
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { useTimefilter } from '@kbn/ml-date-picker';
+import { dynamic } from '@kbn/shared-ux-utility';
 import { ML_PAGES } from '../../../../locator';
 import type { NavigateToPath } from '../../../contexts/kibana';
 import type { MlRoute, PageProps } from '../../router';
@@ -16,9 +17,12 @@ import { createPath, PageLoader } from '../../router';
 import { useRouteResolver } from '../../use_resolver';
 import { usePermissionCheck } from '../../../capabilities/check_capabilities';
 import { getMlNodeCount } from '../../../ml_nodes_check/check_ml_nodes';
-import { CalendarsList } from '../../../settings/calendars';
 import { getBreadcrumbWithUrlForApp } from '../../breadcrumbs';
 
+const CalendarsList = dynamic(async () => ({
+  default: (await import('../../../settings/calendars')).CalendarsList,
+}));
+
 export const calendarListRouteFactory = (
   navigateToPath: NavigateToPath,
   basePath: string
diff --git a/x-pack/plugins/ml/public/application/routing/routes/settings/calendar_new_edit.tsx b/x-pack/plugins/ml/public/application/routing/routes/settings/calendar_new_edit.tsx
index de95a4b854c2a..61d5406871283 100644
--- a/x-pack/plugins/ml/public/application/routing/routes/settings/calendar_new_edit.tsx
+++ b/x-pack/plugins/ml/public/application/routing/routes/settings/calendar_new_edit.tsx
@@ -9,12 +9,12 @@ import type { FC } from 'react';
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { useTimefilter } from '@kbn/ml-date-picker';
+import { dynamic } from '@kbn/shared-ux-utility';
 import type { NavigateToPath } from '../../../contexts/kibana';
 import type { MlRoute, PageProps } from '../../router';
 import { createPath, PageLoader } from '../../router';
 import { useRouteResolver } from '../../use_resolver';
 import { usePermissionCheck } from '../../../capabilities/check_capabilities';
-import { NewCalendar } from '../../../settings/calendars';
 import { getBreadcrumbWithUrlForApp } from '../../breadcrumbs';
 import { ML_PAGES } from '../../../../../common/constants/locator';
 import { getMlNodeCount } from '../../../ml_nodes_check';
@@ -28,6 +28,10 @@ interface NewCalendarPageProps extends PageProps {
   mode: MODE;
 }
 
+const NewCalendar = dynamic(async () => ({
+  default: (await import('../../../settings/calendars')).NewCalendar,
+}));
+
 export const newCalendarRouteFactory = (
   navigateToPath: NavigateToPath,
   basePath: string
diff --git a/x-pack/plugins/ml/public/application/routing/routes/settings/filter_list.tsx b/x-pack/plugins/ml/public/application/routing/routes/settings/filter_list.tsx
index 4c8073e1ecedd..128d9845d41f9 100644
--- a/x-pack/plugins/ml/public/application/routing/routes/settings/filter_list.tsx
+++ b/x-pack/plugins/ml/public/application/routing/routes/settings/filter_list.tsx
@@ -9,6 +9,7 @@ import type { FC } from 'react';
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { useTimefilter } from '@kbn/ml-date-picker';
+import { dynamic } from '@kbn/shared-ux-utility';
 import { ML_PAGES } from '../../../../locator';
 import type { NavigateToPath } from '../../../contexts/kibana';
 import type { MlRoute } from '../../router';
@@ -16,9 +17,12 @@ import { createPath, PageLoader } from '../../router';
 import { useRouteResolver } from '../../use_resolver';
 import { usePermissionCheck } from '../../../capabilities/check_capabilities';
 import { getMlNodeCount } from '../../../ml_nodes_check/check_ml_nodes';
-import { FilterLists } from '../../../settings/filter_lists';
 import { getBreadcrumbWithUrlForApp } from '../../breadcrumbs';
 
+const FilterLists = dynamic(async () => ({
+  default: (await import('../../../settings/filter_lists')).FilterLists,
+}));
+
 export const filterListRouteFactory = (
   navigateToPath: NavigateToPath,
   basePath: string
diff --git a/x-pack/plugins/ml/public/application/routing/routes/settings/filter_list_new_edit.tsx b/x-pack/plugins/ml/public/application/routing/routes/settings/filter_list_new_edit.tsx
index 1e19cf23e4fca..763826e02552c 100644
--- a/x-pack/plugins/ml/public/application/routing/routes/settings/filter_list_new_edit.tsx
+++ b/x-pack/plugins/ml/public/application/routing/routes/settings/filter_list_new_edit.tsx
@@ -9,10 +9,10 @@ import type { FC } from 'react';
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { useTimefilter } from '@kbn/ml-date-picker';
+import { dynamic } from '@kbn/shared-ux-utility';
 import { ML_PAGES } from '../../../../../common/constants/locator';
 import { usePermissionCheck } from '../../../capabilities/check_capabilities';
 import { getMlNodeCount } from '../../../ml_nodes_check/check_ml_nodes';
-import { EditFilterList } from '../../../settings/filter_lists';
 import type { NavigateToPath } from '../../../contexts/kibana';
 import type { MlRoute, PageProps } from '../../router';
 import { createPath, PageLoader } from '../../router';
@@ -28,6 +28,10 @@ interface NewFilterPageProps extends PageProps {
   mode: MODE;
 }
 
+const EditFilterList = dynamic(async () => ({
+  default: (await import('../../../settings/filter_lists')).EditFilterList,
+}));
+
 export const newFilterListRouteFactory = (
   navigateToPath: NavigateToPath,
   basePath: string
diff --git a/x-pack/plugins/ml/public/application/routing/routes/settings/settings.tsx b/x-pack/plugins/ml/public/application/routing/routes/settings/settings.tsx
index bb4309b0f6ec6..581594e0c4bc7 100644
--- a/x-pack/plugins/ml/public/application/routing/routes/settings/settings.tsx
+++ b/x-pack/plugins/ml/public/application/routing/routes/settings/settings.tsx
@@ -9,6 +9,7 @@ import type { FC } from 'react';
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { useTimefilter } from '@kbn/ml-date-picker';
+import { dynamic } from '@kbn/shared-ux-utility';
 import { ML_PAGES } from '../../../../locator';
 import type { NavigateToPath } from '../../../contexts/kibana';
 import type { MlRoute } from '../../router';
@@ -16,9 +17,13 @@ import { createPath, PageLoader } from '../../router';
 import { useRouteResolver } from '../../use_resolver';
 import { usePermissionCheck } from '../../../capabilities/check_capabilities';
 import { getMlNodeCount } from '../../../ml_nodes_check/check_ml_nodes';
-import { AnomalyDetectionSettingsContext, Settings } from '../../../settings';
+import { AnomalyDetectionSettingsContext } from '../../../settings';
 import { getBreadcrumbWithUrlForApp } from '../../breadcrumbs';
 
+const Settings = dynamic(async () => ({
+  default: (await import('../../../settings')).Settings,
+}));
+
 export const settingsRouteFactory = (
   navigateToPath: NavigateToPath,
   basePath: string
diff --git a/x-pack/plugins/ml/public/application/routing/routes/trained_models/models_list.tsx b/x-pack/plugins/ml/public/application/routing/routes/trained_models/models_list.tsx
index 03f0feca736fe..0c9e7b510159c 100644
--- a/x-pack/plugins/ml/public/application/routing/routes/trained_models/models_list.tsx
+++ b/x-pack/plugins/ml/public/application/routing/routes/trained_models/models_list.tsx
@@ -10,6 +10,7 @@ import React from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { dynamic } from '@kbn/shared-ux-utility';
 import { ML_PAGES } from '../../../../locator';
 import type { NavigateToPath } from '../../../contexts/kibana';
 import type { MlRoute } from '../../router';
@@ -17,9 +18,12 @@ import { createPath, PageLoader } from '../../router';
 import { useRouteResolver } from '../../use_resolver';
 import { basicResolvers } from '../../resolvers';
 import { getBreadcrumbWithUrlForApp } from '../../breadcrumbs';
-import { ModelsList } from '../../../model_management';
 import { MlPageHeader } from '../../../components/page_header';
 
+const ModelsList = dynamic(async () => ({
+  default: (await import('../../../model_management')).ModelsList,
+}));
+
 export const modelsListRouteFactory = (
   navigateToPath: NavigateToPath,
   basePath: string