diff --git a/client/packages/lowcoder-design/src/index.ts b/client/packages/lowcoder-design/src/index.ts
index 106d1fa40..9298929c5 100644
--- a/client/packages/lowcoder-design/src/index.ts
+++ b/client/packages/lowcoder-design/src/index.ts
@@ -1,119 +1,54 @@
-import React from "react";
-
-export const Collapse = React.lazy(() => import("./components/Collapase").then(module => ({ default: module.Collapse })));
-export const PadDiv = React.lazy(() => import("./components/Collapase").then(module => ({ default: module.PadDiv })));
-export const UnShow = React.lazy(() => import("./components/Collapase").then(module => ({ default: module.UnShow})));
+export * from "./components/Collapase";
 export * from "./components/CustomModal";
-export const Drawer = React.lazy(() => import("./components/Drawer").then(module => ({ default: module.Drawer })));
-export * from "./components/Dropdown"
-export const ExternalLink = React.lazy(() => import("./components/ExternalLink").then(module => ({ default: module.ExternalLink })));
-export const DocLink = React.lazy(() => import("./components/ExternalLink").then(module => ({ default: module.DocLink })));
+export * from "./components/Drawer";
+export * from "./components/Dropdown";
+export * from "./components/ExternalLink";
 export * from "./components/GlobalInstances";
-export const Input = React.lazy(() => import("./components/Input").then(module => ({ default: module.Input })));
-export const StyledInput = React.lazy(() => import("./components/Input").then(module => ({ default: module.StyledInput })));
-export { EllipsisTextCss, labelCss, CommonTextLabel, CommonGrayLabel } from "./components/Label";
-export const BlockGrayLabel = React.lazy(() => import("./components/Label").then(module => ({ default: module.BlockGrayLabel })));
-export const TextLabel = React.lazy(() => import("./components/Label").then(module => ({ default: module.TextLabel })));
-export const BlockLabel = React.lazy(() => import("./components/Label").then(module => ({ default: module.BlockLabel })));
-export const CollapseTitle = React.lazy(() => import("./components/Label").then(module => ({ default: module.CollapseTitle })));
-export const CollapseLabel = React.lazy(() => import("./components/Label").then(module => ({ default: module.CollapseLabel })));
-export const CollapseLink = React.lazy(() => import("./components/Label").then(module => ({ default: module.CollapseLink })));
-export const CommonTextLabel2 = React.lazy(() => import("./components/Label").then(module => ({ default: module.CommonTextLabel2 })));
-export const CommonErrorLabel = React.lazy(() => import("./components/Label").then(module => ({ default: module.CommonErrorLabel })));
-export const CommonBlueLabel = React.lazy(() => import("./components/Label").then(module => ({ default: module.CommonBlueLabel })));
-export const Menu = React.lazy(() => import("./components/Menu").then(module => ({ default: module.Menu })));
-export const DropdownMenu = React.lazy(() => import("./components/Menu").then(module => ({ default: module.DropdownMenu })));
-export const DropDownSubMenu = React.lazy(() => import("./components/Menu").then(module => ({ default: module.DropDownSubMenu })));
-export const MenuItemWithDelete = React.lazy(() => import("./components/Menu").then(module => ({ default: module.MenuItemWithDelete })));
-export const MenuItem = React.lazy(() => import("./components/MenuItem").then(module => ({ default: module.MenuItem })));
-export const FormItem = React.lazy(() => import("./components/MenuItem").then(module => ({ default: module.FormItem})));
-export const Modal = React.lazy(() => import("./components/Modal").then(module => ({ default: module.Modal})));
-export const ScrollBar = React.lazy(() => import("./components/ScrollBar").then(module => ({ default: module.ScrollBar})));
-export const Search = React.lazy(() => import("./components/Search").then(module => ({ default: module.Search })));
-export {PropertySectionContext, sectionNames} from "./components/Section";
-export type { PropertySectionState, PropertySectionContextType } from "./components/Section";
-export const Section = React.lazy(() => import("./components/Section").then(module => ({ default: module.Section})));
-export const BaseSection = React.lazy(() => import("./components/Section").then(module => ({ default: module.BaseSection})));
-export const SuspensionBox = React.lazy(() => import("./components/SuspensionBox").then(module => ({ default: module.SuspensionBox })));
-export const Switch = React.lazy(() => import("./components/Switch").then(module => ({ default: module.Switch })));
-export const SwitchJsIcon = React.lazy(() => import("./components/Switch").then(module => ({ default: module.SwitchJsIcon })));
-export const SwitchWrapper = React.lazy(() => import("./components/Switch").then(module => ({ default: module.SwitchWrapper })));
-export const TacoSwitch = React.lazy(() => import("./components/Switch").then(module => ({ default: module.TacoSwitch })));
-export const Tabs = React.lazy(() => import("./components/Tab").then(module => ({ default: module.Tabs })));
-export const TableShow = React.lazy(() => import("./components/Table").then(module => ({ default: module.TableShow })));
-export const CustomTree = React.lazy(() => import("./components/Trees").then(module => ({ default: module.CustomTree})));
-export const BranchDiv = React.lazy(() => import("./components/Trees").then(module => ({ default: module.BranchDiv })));
-export const Treediv = React.lazy(() => import("./components/Trees").then(module => ({ default: module.Treediv})));
+export * from "./components/Input";
+export * from "./components/Label";
+export * from "./components/Menu";
+export * from "./components/MenuItem";
+export * from "./components/Modal";
+export * from "./components/ScrollBar";
+export * from "./components/Search";
+export * from "./components/Section";
+export * from "./components/SuspensionBox";
+export * from "./components/Switch";
+export * from "./components/Tab";
+export * from "./components/Table";
+export * from "./components/Trees";
 export * from "./components/TriggeredDialog";
-export const Alert = React.lazy(() => import("./components/alert").then(module => ({ default: module.Alert })));
-export const TacoAudio = React.lazy(() => import("./components/audio").then(module => ({ default: module.TacoAudio })));
-export type { TacoButtonType } from "./components/button";
-export const BigButtonStyle = React.lazy(() => import("./components/button").then(module => ({ default: module.BigButtonStyle })));
-export const BlueButton = React.lazy(() => import("./components/button").then(module => ({ default: module.BlueButton })));
-export const RedButton = React.lazy(() => import("./components/button").then(module => ({ default: module.RedButton })));
-export const LinkButton = React.lazy(() => import("./components/button").then(module => ({ default: module.LinkButton })));
-export const TacoButton = React.lazy(() => import("./components/button").then(module => ({ default: module.TacoButton })));
-export const CheckBox = React.lazy(() => import("./components/checkBox").then(module => ({ default: module.CheckBox })));
+export * from "./components/alert";
+export * from "./components/audio";
+export * from "./components/button";
+export * from "./components/checkBox";
+export * from "./components/colorSelect";
 export * from "./components/colorSelect/colorUtils";
-export const ColorSelect = React.lazy(() => import("./components/colorSelect/index").then(module => ({ default: module.ColorSelect })));
+export * from "./components/colorSelect/index";
 export * from "./components/container";
 export * from "./components/control";
-export const CopyTextButton = React.lazy(() => import("./components/copyTextButton").then(module => ({ default: module.CopyTextButton})));
+export * from "./components/copyTextButton";
 export * from "./components/customSelect";
 export * from "./components/edit";
-export type { EditTextProps } from "./components/edit";
-export const EditText = React.lazy(() => import("./components/edit").then(module => ({ default: module.EditText })));
-export const EditTextWrapper = React.lazy(() => import("./components/edit").then(module => ({ default: module.EditTextWrapper })));
-export const TextWrapper = React.lazy(() => import("./components/edit").then(module => ({ default: module.TextWrapper })));
 export * from "./components/eventHandler";
 export * from "./components/form";
-export { removeQuote, useIcon, iconPrefix } from "./components/iconSelect";
-export const IconSelect = React.lazy(() => import("./components/iconSelect").then(module => ({ default: module.IconSelect })));
-export const IconSelectBase = React.lazy(() => import("./components/iconSelect").then(module => ({ default: module.IconSelectBase})));
-export const TacoImage = React.lazy(() => import("./components/image").then(module => ({ default: module.TacoImage })));
-export const KeyValueList = React.lazy(() => import("./components/keyValueList").then(module => ({ default: module.KeyValueList })));
-export const Loading = React.lazy(() => import("./components/Loading").then(module => ({ default: module.Loading })));
-export const WhiteLoading = React.lazy(() => import("./components/Loading").then(module => ({ default: module.WhiteLoading })));
-export const LightLoading = React.lazy(() => import("./components/Loading").then(module => ({ default: module.LightLoading })));
-export { markdownCompCss } from "./components/markdown";
-export const TacoMarkDown = React.lazy(() => import("./components/markdown").then(module => ({ default: module.TacoMarkDown })));
+export * from "./components/iconSelect";
+export * from "./components/image";
+export * from "./components/keyValueList";
+export * from "./components/Loading";
+export * from "./components/markdown";
 export * from "./components/mockData";
 export * from "./components/option";
-export type { EditPopoverItemType, EditPopoverProps } from "./components/popover";
-export const CustomPopover = React.lazy(() => import("./components/popover").then(module => ({ default: module.CustomPopover })));
-export const SimplePopover = React.lazy(() => import("./components/popover").then(module => ({ default: module.SimplePopover })));
-export const EditPopover = React.lazy(() => import("./components/popover").then(module => ({ default: module.EditPopover})));
-export const PopupCard = React.lazy(() => import("./components/popupCard").then(module => ({ default: module.PopupCard })));
-export const QueryPropertyViewWrapper = React.lazy(() => import("./components/query").then(module => ({ default: module.QueryPropertyViewWrapper })));
-export const QueryAlert = React.lazy(() => import("./components/query").then(module => ({ default: module.QueryAlert })));
-export const QuerySectionWrapper = React.lazy(() => import("./components/query").then(module => ({ default: module.QuerySectionWrapper })));
-export const QueryConfigWrapper = React.lazy(() => import("./components/query").then(module => ({ default: module.QueryConfigWrapper })));
-export const QueryConfigLabel = React.lazy(() => import("./components/query").then(module => ({ default: module.QueryConfigLabel })));
-export const QueryConfigItemWrapper = React.lazy(() => import("./components/query").then(module => ({ default: module.QueryConfigItemWrapper })));
-export const QueryTutorialButton = React.lazy(() => import("./components/query").then(module => ({ default: module.QueryTutorialButton })));
-export const TriggerTypeStyled = React.lazy(() => import("./components/query").then(module => ({ default: module.TriggerTypeStyled })));
-export const SelectedComps = React.lazy(() => import("./components/selectedComps").then(module => ({ default: module.SelectedComps})));
-export const TacoInput = React.lazy(() => import("./components/tacoInput").then(module => ({ default: module.TacoInput })));
-export const BlurFinishInput = React.lazy(() => import("./components/tacoInput").then(module => ({ default: module.BlurFinishInput })));
-export const PhoneNumberInput = React.lazy(() => import("./components/tacoInput").then(module => ({ default: module.PhoneNumberInput })));
-export const OtpFormInput = React.lazy(() => import("./components/tacoInput").then(module => ({ default: module.OtpFormInput })));
-export const FormInput = React.lazy(() => import("./components/tacoInput").then(module => ({ default: module.FormInput })));
-export const PasswordInput = React.lazy(() => import("./components/tacoInput").then(module => ({ default: module.PasswordInput })));
-export { pageItemRender } from "./components/tacoPagination";
-export const TacoPagination = React.lazy(() => import("./components/tacoPagination").then(module => ({ default: module.TacoPagination })));
-export { UnderlineCss } from "./components/toolTip";
-export const TooltipCodeBlock = React.lazy(() => import("./components/toolTip").then(module => ({ default: module.TooltipCodeBlock})));
-export const TooltipLink = React.lazy(() => import("./components/toolTip").then(module => ({ default: module.TooltipLink})));
-export const TutorialsTooltip = React.lazy(() => import("./components/toolTip").then(module => ({ default: module.TutorialsTooltip})));
-export const CommonTipsOverlay = React.lazy(() => import("./components/toolTip").then(module => ({ default: module.CommonTipsOverlay})));
-export const Tooltip = React.lazy(() => import("./components/toolTip").then(module => ({ default: module.Tooltip})));
-export const ToolTipLabel = React.lazy(() => import("./components/toolTip").then(module => ({ default: module.ToolTipLabel})));
-export { playIcon } from "./components/video";
-export const Video = React.lazy(() => import("./components/video").then(module => ({ default: module.Video })));
-export const Container = React.lazy(() => import("./components/video").then(module => ({ default: module.Container})));
-export { useShape } from "./components/shapeSelect";
-export const ShapeSelect = React.lazy(() => import("./components/shapeSelect").then(module => ({ default: module.ShapeSelect })));
-export const ShapeSelectBase = React.lazy(() => import("./components/shapeSelect").then(module => ({ default: module.ShapeSelectBase})));
+export * from "./components/popover";
+export * from "./components/popupCard";
+export * from "./components/query";
+export * from "./components/selectedComps";
+export * from "./components/tacoInput";
+export * from "./components/tacoPagination";
+export * from "./components/toolTip";
+export * from "./components/video";
+export * from "./components/shapeSelect";
 
 export * from "./icons";
+
 export * from "./icons/antIcon";
diff --git a/client/packages/lowcoder/src/i18n/index.tsx b/client/packages/lowcoder/src/i18n/index.tsx
index 426c43dbc..31ee5684d 100644
--- a/client/packages/lowcoder/src/i18n/index.tsx
+++ b/client/packages/lowcoder/src/i18n/index.tsx
@@ -13,9 +13,9 @@ let language = 'en';
 
 export const initTranslator = (lang?: string) => {
   const translator =  new Translator<typeof localeData.en>(
-    localeData,
-    REACT_APP_LANGUAGES,
-    [lang || 'en']
+      localeData,
+      REACT_APP_LANGUAGES,
+      [lang || 'en']
   );
 
   language = translator.language;
diff --git a/client/packages/lowcoder/src/i18n/locales/index.ts b/client/packages/lowcoder/src/i18n/locales/index.ts
index 40f9e166c..6c8e4fe56 100644
--- a/client/packages/lowcoder/src/i18n/locales/index.ts
+++ b/client/packages/lowcoder/src/i18n/locales/index.ts
@@ -1,6 +1,6 @@
 // file examples: en, enGB, zh, zhHK
 // fallback example: current locale is zh-HK, fallback order is zhHK => zh => en
-export * from "./de"; 
+export * from "./de";
 export * from "./en";
 export * from "./it";
 export * from "./pt";
diff --git a/client/packages/lowcoder/src/pages/editor/editorSkeletonView.tsx b/client/packages/lowcoder/src/pages/editor/editorSkeletonView.tsx
index a43a655d7..10c2c762a 100644
--- a/client/packages/lowcoder/src/pages/editor/editorSkeletonView.tsx
+++ b/client/packages/lowcoder/src/pages/editor/editorSkeletonView.tsx
@@ -1,16 +1,15 @@
 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";
@@ -18,6 +17,11 @@ 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;
 `;
diff --git a/client/packages/lowcoder/src/pages/editor/editorView.tsx b/client/packages/lowcoder/src/pages/editor/editorView.tsx
index 190d614a4..80a621514 100644
--- a/client/packages/lowcoder/src/pages/editor/editorView.tsx
+++ b/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')
diff --git a/client/packages/lowcoder/src/pages/tutorials/editorTutorials.tsx b/client/packages/lowcoder/src/pages/tutorials/editorTutorials.tsx
index 4e414590e..1858f3966 100644
--- a/client/packages/lowcoder/src/pages/tutorials/editorTutorials.tsx
+++ b/client/packages/lowcoder/src/pages/tutorials/editorTutorials.tsx
@@ -193,7 +193,7 @@ function addQuery(editorState: EditorState, datasourceInfos: DatasourceInfo[]) {
         name: queryName,
         compType: "restApi",
         comp: {
-          path: i18nObjs.editorTutorials.mockDataUrl || enObj.editorTutorials.mockDataUrl,
+          path: i18nObjs.editorTutorials.mockDataUrl,
           bodyType: "application/json",
         },
         datasourceId: QUICK_REST_API_ID,