perf: done all routes lazy load by react-imported-component

SolidZORO · Jun 23, 2020 · d546ce0 · d546ce0
1 parent 1ce8e89
commit d546ce0
Show file tree

Hide file tree

Showing 13 changed files with 58 additions and 60 deletions.
diff --git a/packages/leaa-dashboard/.babelrc.js b/packages/leaa-dashboard/.babelrc.js
@@ -31,6 +31,7 @@ module.exports = {
         style: true,
       },
     ],
+    ['react-imported-component/babel'],
     ['@babel/plugin-transform-runtime'],
   ],
   ignore: [

diff --git a/packages/leaa-dashboard/package.json b/packages/leaa-dashboard/package.json
@@ -32,7 +32,6 @@
   },
   "dependencies": {
     "@ant-design/icons": "4.2.1",
-    "@loadable/component": "^5.12.0",
     "@nestjsx/crud-request": "^4.6.2",
     "animated-scroll-to": "^2.0.7",
     "antd": "4.3.5",
@@ -65,6 +64,7 @@
     "react-dropzone": "^11.0.1",
     "react-helmet-async": "^1.0.6",
     "react-i18next": "^11.7.0",
+    "react-imported-component": "^6.2.1",
     "react-router-dom": "5.2.0",
     "react-sortable-tree": "^2.7.1",
     "react-test-renderer": "16.13.1",

diff --git a/packages/leaa-dashboard/src/components/Spinner/Spinner.tsx b/packages/leaa-dashboard/src/components/Spinner/Spinner.tsx
@@ -1,14 +1,16 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 // @ts-ignore
 import NProgress from 'nprogress';
 
+import './nprogress.less';
+
 export const Spinner = () => {
-  React.useEffect(() => {
+  useEffect(() => {
     NProgress.start();
 
     return () => {
       NProgress.done();
-      NProgress.remove();
+      // NProgress.remove();
     };
   }, []);
 

diff --git a/packages/leaa-dashboard/src/components/Spinner/nprogress.less b/packages/leaa-dashboard/src/components/Spinner/nprogress.less
@@ -1,4 +1,4 @@
-@import './variables.less';
+@import '~@leaa/dashboard/src/styles/variables.less';
 
 /* Make clicks pass-through */
 #nprogress {
@@ -12,7 +12,7 @@
   top: 0;
   left: 0;
   width: 100%;
-  height: 2px;
+  height: 1px;
   opacity: 0.9;
 }
 
@@ -29,16 +29,18 @@
 }
 
 #nprogress .spinner {
-  display: none;
-  //display: block;
+  //display: none;
+  display: block;
   position: fixed;
   z-index: 10001;
-  top: 3px;
-  right: 3px;
+  //top: 3px;
+  bottom: 10px;
+  right: 10px;
+  opacity: 0.7;
 }
 
 #nprogress .spinner-icon {
-  @w: 17px;
+  @w: 18px;
 
   width: @w;
   height: @w;

diff --git a/packages/leaa-dashboard/src/i18n.ts b/packages/leaa-dashboard/src/i18n.ts
@@ -8,7 +8,7 @@ i18n
   .use(initReactI18next)
   .use(LanguageDetector)
   .init({
-    whitelist: ['en-US', 'zh-CN', 'zh', 'en'],
+    // whitelist: ['en-US', 'zh-CN', 'zh', 'en'],
     resources: {
       'en-US': enUs,
       'zh-CN': zhCn,

diff --git a/packages/leaa-dashboard/src/pages/Permission/PermissionList/PermissionList.tsx b/packages/leaa-dashboard/src/pages/Permission/PermissionList/PermissionList.tsx
@@ -103,8 +103,6 @@ export default (props: IPage) => {
     }
   }, [crudQuery]);
 
-  console.log(props.history.location.key);
-
   return (
     <PageCard
       route={props.route}

diff --git a/packages/leaa-dashboard/src/pages/Tag/TagList/TagList.tsx b/packages/leaa-dashboard/src/pages/Tag/TagList/TagList.tsx
@@ -26,8 +26,6 @@ const API_PATH = 'tags';
 export default (props: IPage) => {
   const { t } = useTranslation();
 
-  console.log('TTTTTTTTTTTTT');
-
   const [crudQuery, setCrudQuery] = useState<ICrudListQueryParams>({
     ...DEFAULT_QUERY,
     ...transUrlQueryToCrudState(window),

diff --git a/packages/leaa-dashboard/src/routes/auth.route.tsx b/packages/leaa-dashboard/src/routes/auth.route.tsx
@@ -2,9 +2,7 @@ import React from 'react';
 import { Route } from 'react-router-dom';
 import { IRouteItem } from '@leaa/dashboard/src/interfaces';
 import { ALLOW_PERMISSION } from '@leaa/dashboard/src/constants';
-import lazy from '@loadable/component';
-
-import { Spinner } from '@leaa/dashboard/src/components';
+import { lazy } from './lazy';
 
 export const authRouteList: IRouteItem[] = [
   {
@@ -22,6 +20,6 @@ export const authRoute = authRouteList.map((route: IRouteItem) => (
     {...route}
     key={route.children ? `group-${route.name}` : route?.path}
     // eslint-disable-next-line react/no-children-prop
-    children={(props) => <route.LazyComponent {...props} route={route} fallback={<Spinner />} />}
+    children={(props) => <route.LazyComponent {...props} route={route} />}
   />
 ));
diff --git a/packages/leaa-dashboard/src/routes/lazy.tsx b/packages/leaa-dashboard/src/routes/lazy.tsx
@@ -1,22 +1,9 @@
 import React from 'react';
-import { Switch, Route, BrowserRouter as Router } from 'react-router-dom';
-import { MasterLayout } from '@leaa/dashboard/src/layouts';
-import Error404 from '@leaa/dashboard/src/pages/Error/404/404';
+import RIC from 'react-imported-component';
 
-import { testRoute } from './test.route';
-import { authRoute } from './auth.route';
+import { Spinner } from '@leaa/dashboard/src/components';
 
-export * from './auth.route';
-export * from './master.route';
-export * from './test.route';
-
-export const Routes = () => (
-  <Router>
-    <Switch>
-      {authRoute}
-      {testRoute}
-      <Route exact path="/404" component={Error404} />
-      <Route component={MasterLayout} />
-    </Switch>
-  </Router>
-);
+export const lazy = (component: any) =>
+  RIC(component, {
+    LoadingComponent: Spinner,
+  });
diff --git a/packages/leaa-dashboard/src/routes/master.route.tsx b/packages/leaa-dashboard/src/routes/master.route.tsx
@@ -1,14 +1,11 @@
 import _ from 'lodash';
-import React, { ReactNode, Suspense } from 'react';
+import React, { ReactNode } from 'react';
 import { Route } from 'react-router-dom';
-import lazy from '@loadable/component';
-// import { lazy } from '@loadable/component';
 
 import { IRouteItem } from '@leaa/dashboard/src/interfaces';
 import { ALLOW_PERMISSION } from '@leaa/dashboard/src/constants';
-
-import { Spinner } from '@leaa/dashboard/src/components';
 import { isDebugMode } from '@leaa/dashboard/src/utils/debug.util';
+import { lazy } from './lazy';
 
 // TIPS: permission: 'ALLOW_PERMISSION' will be always display
 
@@ -434,7 +431,7 @@ const parseRoutes = (routeList: IRouteItem[]) => {
         {...route}
         key={route.children ? `group-${route.name}` : route?.path}
         // eslint-disable-next-line react/no-children-prop
-        children={(props) => <route.LazyComponent {...props} route={route} fallback={<Spinner />} />}
+        children={(props) => <route.LazyComponent {...props} route={route} />}
       />,
     );
   });

diff --git a/packages/leaa-dashboard/src/routes/test.route.tsx b/packages/leaa-dashboard/src/routes/test.route.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
 import { Route } from 'react-router-dom';
-import lazy from '@loadable/component';
 
 import { IRouteItem } from '@leaa/dashboard/src/interfaces';
 import { ALLOW_PERMISSION } from '@leaa/dashboard/src/constants';
-import { Spinner } from '@leaa/dashboard/src/components';
+import { lazy } from './lazy';
 
 const testRouteList: IRouteItem[] = [
   {
@@ -35,6 +34,6 @@ export const testRoute = testRouteList.map((route: IRouteItem) => (
     {...route}
     key={route.path}
     // eslint-disable-next-line react/no-children-prop
-    children={(props) => <route.LazyComponent {...props} route={route} fallback={<Spinner />} />}
+    children={(props) => <route.LazyComponent {...props} route={route} />}
   />
 ));
diff --git a/packages/leaa-dashboard/src/styles/global.less b/packages/leaa-dashboard/src/styles/global.less
@@ -1,5 +1,4 @@
 @import './variables.less';
-@import './nprogress.less';
 
 body {
   &:after {

diff --git a/yarn.lock b/yarn.lock
@@ -1124,7 +1124,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.10.3", "@babel/runtime@^7.7.7", "@babel/runtime@^7.9.6":
+"@babel/runtime@^7.10.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.9.6":
   version "7.10.3"
   resolved "https://registry.npm.taobao.org/@babel/runtime/download/@babel/runtime-7.10.3.tgz?cache=0&sync_timestamp=1592601015947&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Fruntime%2Fdownload%2F%40babel%2Fruntime-7.10.3.tgz#670d002655a7c366540c67f6fd3342cd09500364"
   integrity sha1-Zw0AJlWnw2ZUDGf2/TNCzQlQA2Q=
@@ -2334,14 +2334,6 @@
     npmlog "^4.1.2"
     write-file-atomic "^2.3.0"
 
-"@loadable/component@^5.12.0":
-  version "5.12.0"
-  resolved "https://registry.npm.taobao.org/@loadable/component/download/@loadable/component-5.12.0.tgz#34d056d15f53dc08d04e9203cad6867cf4f7306c"
-  integrity sha1-NNBW0V9T3AjQTpIDytaGfPT3MGw=
-  dependencies:
-    "@babel/runtime" "^7.7.7"
-    hoist-non-react-statics "^3.3.1"
-
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.npm.taobao.org/@mrmlnc/readdir-enhanced/download/@mrmlnc/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -4530,6 +4522,15 @@ babel-plugin-lodash@^3.3.4:
     lodash "^4.17.10"
     require-package-name "^2.0.1"
 
+babel-plugin-macros@^2.6.1:
+  version "2.8.0"
+  resolved "https://registry.npm.taobao.org/babel-plugin-macros/download/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
+  integrity sha1-D5WKfMZVax5lNERl2ZERoeXhATg=
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    cosmiconfig "^6.0.0"
+    resolve "^1.12.0"
+
 babel-plugin-syntax-async-functions@^6.8.0:
   version "6.13.0"
   resolved "https://registry.npm.taobao.org/babel-plugin-syntax-async-functions/download/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
@@ -6281,7 +6282,7 @@ cosmiconfig@^6.0.0:
     path-type "^4.0.0"
     yaml "^1.7.2"
 
-crc-32@~1.2.0:
+crc-32@^1.2.0, crc-32@~1.2.0:
   version "1.2.0"
   resolved "https://registry.npm.taobao.org/crc-32/download/crc-32-1.2.0.tgz#cb2db6e29b88508e32d9dd0ec1693e7b41a18208"
   integrity sha1-yy224puIUI4y2d0OwWk+e0Ghggg=
@@ -9077,7 +9078,7 @@ hoist-non-react-statics@^2.5.5:
   resolved "https://registry.npm.taobao.org/hoist-non-react-statics/download/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
   integrity sha1-xZA89AnA39kI84jmGdhrnBF0y0c=
 
-hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.npm.taobao.org/hoist-non-react-statics/download/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha1-7OCsr3HWLClpwuxZ/v9CpLGoW0U=
@@ -14436,6 +14437,17 @@ react-i18next@^11.7.0:
     "@babel/runtime" "^7.3.1"
     html-parse-stringify2 "2.0.1"
 
+react-imported-component@^6.2.1:
+  version "6.2.1"
+  resolved "https://registry.npm.taobao.org/react-imported-component/download/react-imported-component-6.2.1.tgz#d513348c83c49fdded1fe366c104f082c09d0f2f"
+  integrity sha1-1RM0jIPEn93tH+NmwQTwgsCdDy8=
+  dependencies:
+    babel-plugin-macros "^2.6.1"
+    crc-32 "^1.2.0"
+    detect-node "^2.0.4"
+    scan-directory "^2.0.0"
+    tslib "^1.10.0"
+
 react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6, react-is@^16.9.0:
   version "16.13.1"
   resolved "https://registry.npm.taobao.org/react-is/download/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -15272,6 +15284,11 @@ saxes@^5.0.0:
   dependencies:
     xmlchars "^2.2.0"
 
+scan-directory@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npm.taobao.org/scan-directory/download/scan-directory-2.0.0.tgz#99fcb923ca26b8e2541cc3afb34d50cf494ea65f"
+  integrity sha1-mfy5I8omuOJUHMOvs01Qz0lOpl8=
+
 scheduler@^0.19.1:
   version "0.19.1"
   resolved "https://registry.npm.taobao.org/scheduler/download/scheduler-0.19.1.tgz?cache=0&sync_timestamp=1588782816669&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fscheduler%2Fdownload%2Fscheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"