diff --git a/web/src/App.js b/web/src/App.js
index de43f784..c68645ac 100644
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {Component} from "react";
+import React, {Component, Suspense, lazy} from "react";
 import "./App.less";
 import {Helmet} from "react-helmet";
 import * as Setting from "./Setting";
@@ -30,7 +30,7 @@ import AuthCallback from "./auth/AuthCallback";
 import SamlCallback from "./auth/SamlCallback";
 import i18next from "i18next";
 import {withTranslation} from "react-i18next";
-import ManagementPage from "./ManagementPage";
+const ManagementPage = lazy(() => import("./ManagementPage"));
 const {Footer, Content} = Layout;
 
 import {setTwoToneColor} from "@ant-design/icons";
@@ -366,47 +366,49 @@ class App extends Component {
         <FloatButton.BackTop />
         <CustomGithubCorner />
         {
-          <Layout id="parent-area">
-            <ManagementPage
-              account={this.state.account}
-              uri={this.state.uri}
-              themeData={this.state.themeData}
-              themeAlgorithm={this.state.themeAlgorithm}
-              selectedMenuKey={this.state.selectedMenuKey}
-              requiredEnableMfa={this.state.requiredEnableMfa}
-              menuVisible={this.state.menuVisible}
-              logo={this.state.logo}
-              onChangeTheme={this.setTheme}
-              onClick = {this.onClick}
-              onfinish={() => {
-                this.setState({requiredEnableMfa: false});
-              }}
-              openAiAssistant={() => {
-                this.setState({
-                  isAiAssistantOpen: true,
-                });
-              }}
-              setLogoAndThemeAlgorithm={(nextThemeAlgorithm) => {
-                this.setState({
-                  themeAlgorithm: nextThemeAlgorithm,
-                  logo: this.getLogo(nextThemeAlgorithm),
-                });
-                localStorage.setItem("themeAlgorithm", JSON.stringify(nextThemeAlgorithm));
-              }}
-              setLogoutState={() => {
-                this.setState({
-                  account: null,
-                  themeAlgorithm: ["default"],
-                });
-              }}
-            />
-            {
-              this.renderFooter()
-            }
-            {
-              this.renderAiAssistant()
-            }
-          </Layout>
+          <Suspense fallback={<div>loading</div>}>
+            <Layout id="parent-area">
+              <ManagementPage
+                account={this.state.account}
+                uri={this.state.uri}
+                themeData={this.state.themeData}
+                themeAlgorithm={this.state.themeAlgorithm}
+                selectedMenuKey={this.state.selectedMenuKey}
+                requiredEnableMfa={this.state.requiredEnableMfa}
+                menuVisible={this.state.menuVisible}
+                logo={this.state.logo}
+                onChangeTheme={this.setTheme}
+                onClick = {this.onClick}
+                onfinish={() => {
+                  this.setState({requiredEnableMfa: false});
+                }}
+                openAiAssistant={() => {
+                  this.setState({
+                    isAiAssistantOpen: true,
+                  });
+                }}
+                setLogoAndThemeAlgorithm={(nextThemeAlgorithm) => {
+                  this.setState({
+                    themeAlgorithm: nextThemeAlgorithm,
+                    logo: this.getLogo(nextThemeAlgorithm),
+                  });
+                  localStorage.setItem("themeAlgorithm", JSON.stringify(nextThemeAlgorithm));
+                }}
+                setLogoutState={() => {
+                  this.setState({
+                    account: null,
+                    themeAlgorithm: ["default"],
+                  });
+                }}
+              />
+              {
+                this.renderFooter()
+              }
+              {
+                this.renderAiAssistant()
+              }
+            </Layout>
+          </Suspense>
         }
       </React.Fragment>
     );
diff --git a/web/src/auth/SelfLoginPage.js b/web/src/auth/SelfLoginPage.js
index 7f4fbdd3..e5a6d7e1 100644
--- a/web/src/auth/SelfLoginPage.js
+++ b/web/src/auth/SelfLoginPage.js
@@ -17,6 +17,10 @@ import LoginPage from "./LoginPage";
 import {authConfig} from "./Auth";
 
 class SelfLoginPage extends React.Component {
+  constructor(props) {
+    super(props);
+    import("../ManagementPage");
+  }
   render() {
     return (
       <LoginPage type={"login"} mode={"signin"} applicationName={authConfig.appName} {...this.props} />