lazyloading components to reduce bundle size

yngrdyn · yngrdyn · commit c5fc3a2d83a6 · 2024-01-29T16:33:35.000+01:00
diff --git a/packages/kbn-optimizer/limits.yml b/packages/kbn-optimizer/limits.yml
@@ -29,7 +29,7 @@ pageLoadAssetSize:
   dashboard: 82025
   dashboardEnhanced: 65646
   data: 454087
-  datasetQuality: 123008
+  datasetQuality: 50624
   dataViewEditor: 28082
   dataViewFieldEditor: 27000
   dataViewManagement: 5176
diff --git a/x-pack/plugins/dataset_quality/public/components/dataset_quality/dataset_quality.tsx b/x-pack/plugins/dataset_quality/public/components/dataset_quality/dataset_quality.tsx
@@ -7,11 +7,10 @@
 import React, { useMemo } from 'react';
 import { CoreStart } from '@kbn/core/public';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { dynamic } from '@kbn/shared-ux-utility';
 import { DatasetQualityContext, DatasetQualityContextValue } from './context';
 import { useKibanaContextForPluginProvider } from '../../utils';
 import { DatasetQualityStartDeps } from '../../types';
-import { Header } from './header';
-import { Table } from './table';
 import { DatasetQualityController } from '../../controller';
 
 export interface DatasetQualityProps {
@@ -44,6 +43,9 @@ export const createDatasetQuality = ({ core, plugins }: CreateDatasetQualityArgs
   };
 };
 
+const Header = dynamic(() => import('./header'));
+const Table = dynamic(() => import('./table'));
+
 function DatasetQuality() {
   return (
     <EuiFlexGroup direction="column" gutterSize="m">
diff --git a/x-pack/plugins/dataset_quality/public/components/dataset_quality/header.tsx b/x-pack/plugins/dataset_quality/public/components/dataset_quality/header.tsx
@@ -9,6 +9,8 @@ import { EuiPageHeader } from '@elastic/eui';
 import React from 'react';
 import { datasetQualityAppTitle } from '../../../common/translations';
 
-export function Header() {
+// Allow for lazy loading
+// eslint-disable-next-line import/no-default-export
+export default function Header() {
   return <EuiPageHeader bottomBorder pageTitle={datasetQualityAppTitle} />;
 }
diff --git a/x-pack/plugins/dataset_quality/public/components/dataset_quality/table.tsx b/x-pack/plugins/dataset_quality/public/components/dataset_quality/table.tsx
@@ -71,3 +71,7 @@ export const Table = () => {
     </>
   );
 };
+
+// Allow for lazy loading
+// eslint-disable-next-line import/no-default-export
+export default Table;
diff --git a/x-pack/plugins/dataset_quality/public/components/flyout/flyout.tsx b/x-pack/plugins/dataset_quality/public/components/flyout/flyout.tsx
@@ -22,6 +22,7 @@ import { Header } from './header';
 import { IntegrationSummary } from './integration_summary';
 import { FlyoutProps } from './types';
 
+// Allow for lazy loading
 // eslint-disable-next-line import/no-default-export
 export default function Flyout({ dataset, closeFlyout }: FlyoutProps) {
   const { dataStreamStat, dataStreamDetails, dataStreamDetailsLoading, fieldFormats } =

Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,8 @@ import { EuiPageHeader } from '@elastic/eui';`
`9`	`9`	`import React from 'react';`
`10`	`10`	`import { datasetQualityAppTitle } from '../../../common/translations';`
`11`	`11`
`12`		`-export function Header() {`
	`12`	`+// Allow for lazy loading`
	`13`	`+// eslint-disable-next-line import/no-default-export`
	`14`	`+export default function Header() {`
`13`	`15`	`return <EuiPageHeader bottomBorder pageTitle={datasetQualityAppTitle} />;`
`14`	`16`	`}`