feat: use lazy load to load management pages (#2752)

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,6 +366,7 @@ class App extends Component {
         <FloatButton.BackTop />
         <CustomGithubCorner />
         {
+          <Suspense fallback={<div>loading</div>}>
             <Layout id="parent-area">
               <ManagementPage
                 account={this.state.account}
@@ -407,6 +408,7 @@ class App extends Component {
                 this.renderAiAssistant()
               }
             </Layout>
+          </Suspense>
         }
       </React.Fragment>
     );

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} />