CB-4485 fix: bundle splitting (#2282)

2026-09-24 16:04:36 +08:00 · 2024-01-12 18:48:26 +03:00
parent dbe2cb558d
commit 8fdecdf757
21 changed files with 105 additions and 57 deletions
@@ -6,3 +6,7 @@
  flex-direction: column;
  overflow: hidden;
 }
+
+.loader {
+  height: var(--app-height);
+}
@@ -47,9 +47,11 @@ export const Body = observer(function Body() {

  return (
    <DNDProvider>
-      <Loader suspense>
+      <Loader className={s(styles, { loader: true })} suspense>
        <div ref={ref} className={s(styles, { bodyContent: true }, `theme-${themeService.currentTheme.id}`)}>
-          <Loader suspense>{Screen && <Screen {...screenService.routerService.params} />}</Loader>
+          <Loader className={s(styles, { loader: true })} suspense>
+            {Screen && <Screen {...screenService.routerService.params} />}
+          </Loader>
          <DialogsPortal />
          <Notifications />
        </div>
@@ -0,0 +1,10 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2023 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+import { importLazyComponent } from '@cloudbeaver/core-utils';
+
+export const BodyLazy = importLazyComponent(() => import('./Body').then(m => m.Body));
@@ -6,7 +6,7 @@ export * from './AppScreen/AppScreenBootstrap';
 export * from './AppLocaleService';

 // components
-export * from './Body';
+export * from './BodyLazy';

 // Interfaces
 export * from './manifest';
@@ -8,9 +8,10 @@
 import { Suspense } from 'react';
 import { createRoot, Root } from 'react-dom/client';

-import { Body } from '@cloudbeaver/core-app';
+import { BodyLazy } from '@cloudbeaver/core-app';
 import { DisplayError, ErrorBoundary, Loader, s } from '@cloudbeaver/core-blocks';
 import { AppContext, IServiceInjector } from '@cloudbeaver/core-di';
+
 import styles from './renderLayout.m.css';

 interface IRender {
@@ -46,15 +47,13 @@ export function renderLayout(serviceInjector: IServiceInjector): IRender {
    },
    renderApp() {
      this.initRoot().render(
-        (
-          <AppContext app={serviceInjector}>
-            <ErrorBoundary root>
-              <Suspense fallback={<Loader className={s(styles, { loader: true })} />}>
-                <Body />
-              </Suspense>
-            </ErrorBoundary>
-          </AppContext>
-        ),
+        <AppContext app={serviceInjector}>
+          <ErrorBoundary root>
+            <Suspense fallback={<Loader className={s(styles, { loader: true })} />}>
+              <BodyLazy />
+            </Suspense>
+          </ErrorBoundary>
+        </AppContext>,
      );
    },
    renderError(exception?: any) {
@@ -1,5 +1,11 @@
 module.exports = [
  'react-data-grid',
+  'react-markdown',
+  'react-virtualized',
+  'react-window',
+  'react-dnd',
+  'react-dnd-html5-backend',
+  '@popperjs',
  'leaflet',
  'react-leaflet',
  'wellknown',
@@ -33,6 +33,7 @@ $theme-menu-bar-small-action-radius: 3px !default;
 $app-height: 100vh !default;

@mixin css-variables {
+  --app-height: #{$app-height};
  .theme-form-element-radius {
    border-radius: $theme-form-element-radius;
  }
@@ -24,6 +24,7 @@
    "md5": "^2.3.0",
    "mobx": "^6.12.0",
    "underscore": "^1.13.6",
+    "react": "^18.2.0",
    "uuid": "^9.0.1"
  },
  "peerDependencies": {},
@@ -31,6 +32,7 @@
    "@types/md5": "~2.3.5",
    "@types/uuid": "~9.0.7",
    "@types/underscore": "^1.11.15",
+    "@types/react": "^18.2.42",
    "typescript": "^5.3.2",
    "@types/jest": "^29.5.10"
  }
@@ -0,0 +1,15 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2023 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+import React from 'react';
+
+export function importLazyComponent<TComponent extends React.FC<any>>(componentImporter: () => Promise<TComponent>) {
+  return React.lazy<TComponent>(async () => {
+    const component = await componentImporter();
+    return { default: component };
+  });
+}
@@ -8,6 +8,7 @@ export * from './Quadtree/index';

 export * from './underscore';

+export * from './importLazyComponent';
 export * from './base64ToBlob';
 export * from './blobToBase64';
 export * from './base64ToHex';
@@ -0,0 +1,10 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+import { importLazyComponent } from '@cloudbeaver/core-utils';
+
+export const EditorLoader = importLazyComponent(() => import('./Editor').then(m => m.Editor));
@@ -1,23 +0,0 @@
-/*
- * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2024 DBeaver Corp and others
- *
- * Licensed under the Apache License, Version 2.0.
- * you may not use this file except in compliance with the License.
- */
-import { forwardRef } from 'react';
-
-import { ComplexLoader, createComplexLoader } from '@cloudbeaver/core-blocks';
-
-import type { IEditorProps } from './IEditorProps';
-import type { IEditorRef } from './IEditorRef';
-import type { IDefaultExtensions } from './useEditorDefaultExtensions';
-
-const loader = createComplexLoader(async function loader() {
-  const { Editor } = await import('./Editor');
-  return { Editor };
-});
-
-export const EditorLoader = forwardRef<IEditorRef, IEditorProps & IDefaultExtensions>(function EditorLoader(props, ref) {
-  return <ComplexLoader loader={loader}>{({ Editor }) => <Editor {...props} ref={ref} />}</ComplexLoader>;
-});
@@ -98,6 +98,8 @@ export const CellEditor = observer<Pick<RenderEditCellProps<IResultSetRowKey>, '
      event.stopPropagation();
    };

+    const editorPortal = dataGridContext.getEditorPortal();
+
    return (
      <div
        ref={setElementRef}
@@ -108,7 +110,7 @@ export const CellEditor = observer<Pick<RenderEditCellProps<IResultSetRowKey>, '
        onMouseDown={preventClick}
        onMouseUp={preventClick}
      >
-        {
+        {editorPortal &&
          createPortal(
            <div ref={setPopperRef} className={s(styles, { editor: true })} style={popper.styles.popper} {...popper.attributes.popper}>
              <InlineEditor
@@ -129,9 +131,8 @@ export const CellEditor = observer<Pick<RenderEditCellProps<IResultSetRowKey>, '
                onUndo={handleUndo}
              />
            </div>,
-            dataGridContext.getEditorPortal()!,
-          ) as any
-        }
+            editorPortal,
+          )}
      </div>
    );
  }),
@@ -23,6 +23,10 @@
      height: 12px;
    }
  }
+
+  & .loader {
+    height: 24px;
+  }
 }

 .textFormatterValue {
@@ -8,17 +8,19 @@
 import { observer } from 'mobx-react-lite';
 import { useCallback, useContext, useEffect, useRef } from 'react';

-import { getComputed, IconOrImage, s, useS } from '@cloudbeaver/core-blocks';
-import { isValidUrl } from '@cloudbeaver/core-utils';
+import { getComputed, IconOrImage, Loader, s, useS } from '@cloudbeaver/core-blocks';
+import { importLazyComponent, isValidUrl } from '@cloudbeaver/core-utils';
 import type { IResultSetRowKey } from '@cloudbeaver/plugin-data-viewer';
 import type { RenderCellProps } from '@cloudbeaver/plugin-react-data-grid';

 import { EditingContext } from '../../../Editing/EditingContext';
-import { CellEditor, IEditorRef } from '../../CellEditor';
+import type { IEditorRef } from '../../CellEditor';
 import { CellContext } from '../../CellRenderer/CellContext';
 import { TableDataContext } from '../../TableDataContext';
 import styles from './TextFormatter.m.css';

+const CellEditor = importLazyComponent(() => import('../../CellEditor').then(module => module.CellEditor));
+
 export const TextFormatter = observer<RenderCellProps<IResultSetRowKey>>(function TextFormatter({ row, column }) {
  const editorRef = useRef<IEditorRef>(null);
  const editingContext = useContext(EditingContext);
@@ -53,7 +55,9 @@ export const TextFormatter = observer<RenderCellProps<IResultSetRowKey>>(functio
  if (cellContext.isEditing) {
    return (
      <div className={classes}>
-        <CellEditor ref={editorRef} row={row} column={column} onClose={handleClose} />
+        <Loader className={s(style, { loader: true })} suspense small>
+          <CellEditor ref={editorRef} row={row} column={column} onClose={handleClose} />
+        </Loader>
      </div>
    );
  }
@@ -7,15 +7,19 @@
 */
 import { Bootstrap, injectable } from '@cloudbeaver/core-di';
 import { EObjectFeature, NavNodeInfoResource } from '@cloudbeaver/core-navigation-tree';
+import { importLazyComponent } from '@cloudbeaver/core-utils';
 import { NavNodeViewService } from '@cloudbeaver/plugin-navigation-tree';

 import { DDLViewerFooterService } from './DdlViewer/DDLViewerFooterService';
-import { DDLViewerTab } from './DdlViewer/DDLViewerTab';
-import { DDLViewerTabPanel } from './DdlViewer/DDLViewerTabPanel';
-import { ExtendedDDLViewerTabPanel } from './ExtendedDDLViewer/ExtendedDDLViewerTabPanel';
 import { NAV_NODE_DDL_ID } from './NAV_NODE_DDL_ID';
 import { NAV_NODE_EXTENDED_DDL_ID } from './NAV_NODE_EXTENDED_DDL_ID';

+const DDLViewerTab = importLazyComponent(() => import('./DdlViewer/DDLViewerTab').then(m => m.DDLViewerTab));
+const DDLViewerTabPanel = importLazyComponent(() => import('./DdlViewer/DDLViewerTabPanel').then(m => m.DDLViewerTabPanel));
+const ExtendedDDLViewerTabPanel = importLazyComponent(() =>
+  import('./ExtendedDDLViewer/ExtendedDDLViewerTabPanel').then(m => m.ExtendedDDLViewerTabPanel),
+);
+
@injectable()
 export class DdlViewerBootstrap extends Bootstrap {
  constructor(
@@ -8,7 +8,7 @@
 import { observer } from 'mobx-react-lite';
 import { forwardRef } from 'react';

-import { EditorLoader, IDefaultExtensions, IEditorProps, IEditorRef } from '@cloudbeaver/plugin-codemirror6';
+import { EditorLoader, type IDefaultExtensions, type IEditorProps, type IEditorRef } from '@cloudbeaver/plugin-codemirror6';

 export const SQLCodeEditor = observer<IEditorProps & IDefaultExtensions, IEditorRef>(
  forwardRef(function SQLCodeEditor(props, ref) {
@@ -6,13 +6,17 @@
 * you may not use this file except in compliance with the License.
 */
 import { observer } from 'mobx-react-lite';
+import React from 'react';
 import styled, { css } from 'reshadow';

+import { importLazyComponent } from '@cloudbeaver/core-utils';
+
 import type { ISqlEditorTabState } from '../ISqlEditorTabState';
-import { SqlExecutionPlanPanel } from './ExecutionPlan/SqlExecutionPlanPanel';
-import { OutputLogsPanel } from './OutputLogs/OutputLogsPanel';
-import { SqlResultSetPanel } from './SqlResultSetPanel';
-import { SqlScriptStatisticsPanel } from './SqlScriptStatisticsPanel';
+
+const SqlExecutionPlanPanel = importLazyComponent(() => import('./ExecutionPlan/SqlExecutionPlanPanel').then(module => module.SqlExecutionPlanPanel));
+const OutputLogsPanel = importLazyComponent(() => import('./OutputLogs/OutputLogsPanel').then(module => module.OutputLogsPanel));
+const SqlResultSetPanel = importLazyComponent(() => import('./SqlResultSetPanel').then(module => module.SqlResultSetPanel));
+const SqlScriptStatisticsPanel = importLazyComponent(() => import('./SqlScriptStatisticsPanel').then(module => module.SqlScriptStatisticsPanel));

 const style = css`
  result-panel {
@@ -9,9 +9,10 @@ import { injectable } from '@cloudbeaver/core-di';
 import { CommonDialogService } from '@cloudbeaver/core-dialogs';
 import { NotificationService } from '@cloudbeaver/core-events';
 import { GraphQLService, ResultDataFormat, UpdateResultsDataBatchScriptMutationVariables } from '@cloudbeaver/core-sdk';
+import { importLazyComponent } from '@cloudbeaver/core-utils';
 import { DocumentEditAction, type IDatabaseDataModel, ResultSetEditAction } from '@cloudbeaver/plugin-data-viewer';

-import { ScriptPreviewDialog } from './ScriptPreviewDialog';
+const ScriptPreviewDialog = importLazyComponent(() => import('./ScriptPreviewDialog').then(m => m.ScriptPreviewDialog));

@injectable()
 export class ScriptPreviewService {
@@ -9,12 +9,14 @@ import { Bootstrap, injectable } from '@cloudbeaver/core-di';
 import { CommonDialogService } from '@cloudbeaver/core-dialogs';
 import { DATA_CONTEXT_NAV_NODE, EObjectFeature } from '@cloudbeaver/core-navigation-tree';
 import { getCachedMapResourceLoaderState } from '@cloudbeaver/core-resource';
+import { importLazyComponent } from '@cloudbeaver/core-utils';
 import { DATA_CONTEXT_MENU, DATA_CONTEXT_MENU_NESTED, MenuBaseItem, MenuService } from '@cloudbeaver/core-view';

-import { GeneratedSqlDialog } from './GeneratedSqlDialog';
 import { MENU_SQL_GENERATORS } from './MENU_SQL_GENERATORS';
 import { SqlGeneratorsResource } from './SqlGeneratorsResource';

+const GeneratedSqlDialog = importLazyComponent(() => import('./GeneratedSqlDialog').then(m => m.GeneratedSqlDialog));
+
@injectable()
 export class SqlGeneratorsBootstrap extends Bootstrap {
  constructor(
@@ -7,11 +7,12 @@
 */
 import { AdministrationItemService, AdministrationItemType } from '@cloudbeaver/core-administration';
 import { Bootstrap, injectable } from '@cloudbeaver/core-di';
+import { importLazyComponent } from '@cloudbeaver/core-utils';
 import { VersionUpdateService } from '@cloudbeaver/core-version-update';

-import { DockerUpdateInstructions } from './DockerUpdateInstructions';
-import { VersionUpdate } from './VersionUpdate';
-import { VersionUpdateDrawerItem } from './VersionUpdateDrawerItem';
+const DockerUpdateInstructions = importLazyComponent(() => import('./DockerUpdateInstructions').then(m => m.DockerUpdateInstructions));
+const VersionUpdate = importLazyComponent(() => import('./VersionUpdate').then(m => m.VersionUpdate));
+const VersionUpdateDrawerItem = importLazyComponent(() => import('./VersionUpdateDrawerItem').then(m => m.VersionUpdateDrawerItem));

@injectable()
 export class PluginBootstrap extends Bootstrap {