process lazy import

Author: Imiss-U1025

client/packages/lowcoder/src/pages/editor/editorSkeletonView.tsx

@@ -1,23 +1,27 @@
 import Header from "pages/common/header";
-import React from "react";
+import React, {lazy} from "react";
 import {
   Body,
   EditorContainer,
   Height100Div,
-  LeftPanel,
-  MiddlePanel,
 } from "pages/common/styledComponent";
 import { getPanelStatus, getEditorModeStatus, getPanelStyle } from "util/localStorageUtil";
-import { BottomSkeleton } from "pages/editor/bottom/BottomContent";
-import RightPanel from "pages/editor/right/RightPanel";
+// import { BottomSkeleton } from "pages/editor/bottom/BottomContent";
+// import RightPanel from "pages/editor/right/RightPanel";
 import _ from "lodash";
+
 import styled from "styled-components";
 import { default as Skeleton } from "antd/es/skeleton";
 import { default as Spin } from "antd/es/spin";
 import { useTemplateViewMode, useUserViewMode } from "util/hooks";
 import { ProductLoading } from "components/ProductLoading";
 import { default as LoadingOutlined } from "@ant-design/icons/LoadingOutlined";
 
+const BottomSkeleton = lazy(() => import("pages/editor/bottom/BottomContent").then(module => ({default: module.BottomSkeleton})));
+const RightPanel = lazy(() => import('pages/editor/right/RightPanel'));
+const LeftPanel = lazy(() => import("pages/common/styledComponent").then(module =>({default: module.LeftPanel})));
+const MiddlePanel = lazy(() => import("pages/common/styledComponent").then(module =>({default: module.MiddlePanel})));
+
 const StyledSkeleton = styled(Skeleton)`
   padding: 16px;
 `;

client/packages/lowcoder/src/pages/editor/editorView.tsx

@@ -17,7 +17,7 @@ import {
   ScrollBar,
 } from "lowcoder-design";
 import { useTemplateViewMode } from "util/hooks";
-import Header, {
+import {
   type PanelStatus,
   type TogglePanel,
   type EditorModeStatus,
@@ -55,7 +55,17 @@ import { isAggregationApp } from "util/appUtils";
 import EditorSkeletonView from "./editorSkeletonView";
 import { getCommonSettings } from "@lowcoder-ee/redux/selectors/commonSettingSelectors";
 import { isEqual, noop } from "lodash";
-import { BottomSkeleton } from "./bottom/BottomContent";
+// import { BottomSkeleton } from "./bottom/BottomContent";
+
+const Header = lazy(
+    () => import("pages/common/header")
+        .then(module => ({default: module.default}))
+);
+
+const BottomSkeleton = lazy(
+    () => import("pages/editor/bottom/BottomContent")
+        .then(module => ({default: module.BottomSkeleton}))
+);
 
 const LeftContent = lazy(
   () => import('./LeftContent')