perf: 优化菜单加载

package-lock.json

@@ -48,6 +48,22 @@
         "omit.js": "^2.0.2",
         "rc-util": "^5.4.0",
         "swr": "^0.3.6"
+      },
+      "dependencies": {
+        "@ant-design/pro-utils": {
+          "version": "1.6.1",
+          "resolved": "https://g.civnet.cn:4873/@ant-design%2fpro-utils/-/pro-utils-1.6.1.tgz",
+          "integrity": "sha1-uL88nOQ6mBNV3BH5EHvznz0jwF4=",
+          "dev": true,
+          "requires": {
+            "@ant-design/icons": "^4.3.0",
+            "@ant-design/pro-provider": "1.2.6",
+            "classnames": "^2.2.6",
+            "fast-deep-equal": "^3.1.3",
+            "moment": "^2.27.0",
+            "rc-util": "^5.0.6"
+          }
+        }
       }
     },
     "@ant-design/pro-form": {
@@ -65,17 +81,33 @@
         "rc-resize-observer": "^0.2.3",
         "rc-util": "^5.0.6",
         "use-media-antd-query": "^1.0.3"
+      },
+      "dependencies": {
+        "@ant-design/pro-utils": {
+          "version": "1.6.1",
+          "resolved": "https://g.civnet.cn:4873/@ant-design%2fpro-utils/-/pro-utils-1.6.1.tgz",
+          "integrity": "sha1-uL88nOQ6mBNV3BH5EHvznz0jwF4=",
+          "dev": true,
+          "requires": {
+            "@ant-design/icons": "^4.3.0",
+            "@ant-design/pro-provider": "1.2.6",
+            "classnames": "^2.2.6",
+            "fast-deep-equal": "^3.1.3",
+            "moment": "^2.27.0",
+            "rc-util": "^5.0.6"
+          }
+        }
       }
     },
     "@ant-design/pro-layout": {
-      "version": "6.9.2",
-      "resolved": "https://g.civnet.cn:4873/@ant-design%2fpro-layout/-/pro-layout-6.9.2.tgz",
-      "integrity": "sha1-ltzRjbqqDa0HKKYkuRTOl48of/4=",
+      "version": "6.10.8",
+      "resolved": "https://g.civnet.cn:4873/@ant-design%2fpro-layout/-/pro-layout-6.10.8.tgz",
+      "integrity": "sha1-6y7/bw7gCtkisxN3KO8LwSO+iQ4=",
       "dev": true,
       "requires": {
         "@ant-design/icons": "^4.0.0",
-        "@ant-design/pro-provider": "1.2.6",
-        "@ant-design/pro-utils": "1.6.1",
+        "@ant-design/pro-provider": "1.4.2",
+        "@ant-design/pro-utils": "1.10.4",
         "@umijs/route-utils": "^1.0.33",
         "classnames": "^2.2.6",
         "history": "^4.10.1",
@@ -94,6 +126,15 @@
         "warning": "^4.0.3"
       },
       "dependencies": {
+        "@ant-design/pro-provider": {
+          "version": "1.4.2",
+          "resolved": "https://g.civnet.cn:4873/@ant-design%2fpro-provider/-/pro-provider-1.4.2.tgz",
+          "integrity": "sha1-WUunbdGtswrplqLfwX1zDSXtQOc=",
+          "dev": true,
+          "requires": {
+            "rc-util": "^5.0.1"
+          }
+        },
         "history": {
           "version": "4.10.1",
           "resolved": "https://g.civnet.cn:4873/history/-/history-4.10.1.tgz",
@@ -205,6 +246,20 @@
         "use-media-antd-query": "1.0.2"
       },
       "dependencies": {
+        "@ant-design/pro-utils": {
+          "version": "1.6.1",
+          "resolved": "https://g.civnet.cn:4873/@ant-design%2fpro-utils/-/pro-utils-1.6.1.tgz",
+          "integrity": "sha1-uL88nOQ6mBNV3BH5EHvznz0jwF4=",
+          "dev": true,
+          "requires": {
+            "@ant-design/icons": "^4.3.0",
+            "@ant-design/pro-provider": "1.2.6",
+            "classnames": "^2.2.6",
+            "fast-deep-equal": "^3.1.3",
+            "moment": "^2.27.0",
+            "rc-util": "^5.0.6"
+          }
+        },
         "use-media-antd-query": {
           "version": "1.0.2",
           "resolved": "https://g.civnet.cn:4873/use-media-antd-query/-/use-media-antd-query-1.0.2.tgz",
@@ -217,17 +272,28 @@
       }
     },
     "@ant-design/pro-utils": {
-      "version": "1.6.1",
-      "resolved": "https://g.civnet.cn:4873/@ant-design%2fpro-utils/-/pro-utils-1.6.1.tgz",
-      "integrity": "sha1-uL88nOQ6mBNV3BH5EHvznz0jwF4=",
+      "version": "1.10.4",
+      "resolved": "https://g.civnet.cn:4873/@ant-design%2fpro-utils/-/pro-utils-1.10.4.tgz",
+      "integrity": "sha1-BlFQ/nRzFaaUFjFeGHNSWpVfOoM=",
       "dev": true,
       "requires": {
         "@ant-design/icons": "^4.3.0",
-        "@ant-design/pro-provider": "1.2.6",
+        "@ant-design/pro-provider": "1.4.2",
         "classnames": "^2.2.6",
         "fast-deep-equal": "^3.1.3",
         "moment": "^2.27.0",
         "rc-util": "^5.0.6"
+      },
+      "dependencies": {
+        "@ant-design/pro-provider": {
+          "version": "1.4.2",
+          "resolved": "https://g.civnet.cn:4873/@ant-design%2fpro-provider/-/pro-provider-1.4.2.tgz",
+          "integrity": "sha1-WUunbdGtswrplqLfwX1zDSXtQOc=",
+          "dev": true,
+          "requires": {
+            "rc-util": "^5.0.1"
+          }
+        }
       }
     },
     "@ant-design/react-slick": {
@@ -25259,9 +25325,9 @@
       }
     },
     "react-copy-to-clipboard": {
-      "version": "5.0.2",
-      "resolved": "https://g.civnet.cn:4873/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.2.tgz",
-      "integrity": "sha512-/2t5mLMMPuN5GmdXo6TebFa8IoFxZ+KTDDqYhcDm0PhkgEzSxVvIX26G20s1EB02A4h2UZgwtfymZ3lGJm0OLg==",
+      "version": "5.0.3",
+      "resolved": "https://g.civnet.cn:4873/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.3.tgz",
+      "integrity": "sha1-KgYjsRFaHYyEFE6UNNM0K1r0GrQ=",
       "dev": true,
       "requires": {
         "copy-to-clipboard": "^3",

package.json

@@ -131,10 +131,10 @@
   },
   "devDependencies": {
     "@ant-design/icons": "^4.0.0",
-    "@ant-design/pro-layout": "^6.7.0",
+    "@ant-design/pro-layout": "^6.10.7",
     "@ant-design/pro-skeleton": "^1.0.0-beta.2",
     "@ant-design/pro-table": "^2.5.3",
-    "@ant-design/pro-utils": "^1.4.0",
+    "@ant-design/pro-utils": "^1.10.4",
     "@babel/cli": "7.4.3",
     "@babel/core": "7.4.3",
     "@babel/plugin-proposal-class-properties": "7.4.0",

src/app.js

@@ -8,6 +8,7 @@ import 'kit_utils/lib/format';
 import 'sanitize.css/sanitize.css';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { ErrorBoundary } from '@ant-design/pro-utils';
 import { ConnectedRouter } from 'connected-react-router/immutable';
 import Immutable from 'immutable';
 import { params, Storeage } from 'kit_utils';
@@ -32,13 +33,17 @@ const initialState = Immutable.Map();
 const store = configureStore(initialState, history);
 const MOUNT_NODE = document.getElementById('app');
 const render = () => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+
   ReactDOM.render(
     <Provider store={store}>
       <ConnectedRouter history={history}>
         <ConfigProvider>
-          <Container>
-            <App />
-          </Container>
+          <ErrorBoundary>
+            <Container>
+              <App />
+            </Container>
+          </ErrorBoundary>
         </ConfigProvider>
       </ConnectedRouter>
     </Provider>,

src/containers/App/index.js

 import React from 'react';
-
 import { Helmet } from 'react-helmet';
 import { connect } from 'react-redux';
 import { renderRoutes } from 'react-router-config';

src/layouts/BasicLayout.js

@@ -354,7 +354,7 @@ const BasicLayout = props => {
     clearTime = setTimeout(() => {
       setCurrentRoutes(props.route.routes[props.currentMenuIndex]);
       setLoading(false);
-    }, 100);
+    }, 20);
     return () => clearTimeout && clearTimeout(clearTime);
   }, [props.currentMenuIndex]);
 
@@ -694,6 +694,7 @@ const BasicLayout = props => {
         openKeys={[...openKeys]}
         menuProps={{
           onClick: ({ item, key, keyPath, domEvent }) => {
+            debugger
             domEvent.persist();
             const keyField = key.indexOf('/') > -1 ? 'path' : 'key';
             const config = findPathByLeafId(key, [currentRoutes], '', keyField);

src/micro.js

@@ -82,6 +82,7 @@ export const initMicroApps = loader => {
     },
     singular: true,
     scopedCSS: true,
+    prefetch: 'all',
     // eslint-disable-next-line no-underscore-dangle
     getPublicPath: window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__,
     excludeAssetFilter: url =>

src/utils/utils.js

@@ -50,16 +50,21 @@ export function isPromise(obj) {
 export function getBaseName() {
   return pkg.name.toLocaleLowerCase();
 }
-
+const cache = {};
 export function findPathByLeafId(leafId, nodes, path, key) {
   if (path === undefined) {
     path = {};
   }
   let tmpPath = path;
+
+  if (cache[leafId]) {
+    return cache[leafId];
+  }
   // eslint-disable-next-line no-plusplus
   for (let i = 0; i < nodes.length; i++) {
     if (nodes[i] && nodes[i][key] && leafId === nodes[i][key]) {
       tmpPath = nodes[i];
+      cache[leafId] = tmpPath
       return tmpPath;
     }
     if (nodes[i] && nodes[i].routes) {
@@ -72,11 +77,11 @@ export function findPathByLeafId(leafId, nodes, path, key) {
         location,
       );
       if (findResult) {
+        cache[leafId] = findResult
         return findResult;
       }
     }
   }
-  return tmpPath;
 }
 
 export function transformURL(path) {