perf: react-router use lazy from '@loadable/component'

SolidZORO · Jun 21, 2020 · 58e306d · 58e306d
1 parent ba4a02e
commit 58e306d
Show file tree

Hide file tree

Showing 16 changed files with 110 additions and 206 deletions.
diff --git a/packages/leaa-api/jest-e2e.config.js b/packages/leaa-api/jest-e2e.config.js
@@ -18,6 +18,7 @@ module.exports = {
   //
   testRegex: '.*\\.e2e-(spec|test).(t|j)s$',
   collectCoverageFrom: [
+    '__test__/**/*.{js,jsx,tsx,ts}',
     'test/**/*.{js,jsx,tsx,ts}',
     // 'src/**/*.{js,jsx,tsx,ts}',
     '!**/node_modules/**',

diff --git a/packages/leaa-api/jest.config.js b/packages/leaa-api/jest.config.js
@@ -18,6 +18,7 @@ module.exports = {
   //
   testRegex: '.*\\.(spec|test).(t|j)s$',
   collectCoverageFrom: [
+    '__test__/**/*.{js,jsx,tsx,ts}',
     'test/**/*.{js,jsx,tsx,ts}',
     // 'src/**/*.{js,jsx,tsx,ts}',
     '!**/node_modules/**',

diff --git a/packages/leaa-dashboard/src/App.tsx b/packages/leaa-dashboard/src/App.tsx
@@ -13,7 +13,7 @@ import { ErrorBoundary } from '@leaa/dashboard/src/components/ErrorBoundary/Erro
 import { RefreshflatPermissions } from '@leaa/dashboard/src/components/RefreshflatPermissions/RefreshflatPermissions';
 import { RefreshSetting } from '@leaa/dashboard/src/components/RefreshSetting/RefreshSetting';
 
-import { masterRoute, authRoute, otherRoute, testWithoutLayoutRoute } from '@leaa/dashboard/src/routes';
+import { masterRoute, authRoute, otherRoute } from '@leaa/dashboard/src/routes';
 import { initStore, StoreProvider } from '@leaa/dashboard/src/stores';
 import i18n from '@leaa/dashboard/src/i18n';
 import { envConfig } from '@leaa/dashboard/src/configs';
@@ -47,7 +47,6 @@ export const App = (): JSX.Element => {
                     <Switch>
                       {authRoute}
                       {masterRoute}
-                      {testWithoutLayoutRoute}
                       {otherRoute}
                     </Switch>
                   </Router>

diff --git a/packages/leaa-dashboard/src/components/Spinner/style.module.less b/packages/leaa-dashboard/src/components/Spinner/style.module.less
@@ -4,14 +4,19 @@
   z-index: 99999;
   opacity: 0.5;
 
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  align-content: center;
-  margin-top: 113px;
+  //display: flex;
+  //justify-content: center;
+  //align-items: center;
+  //align-content: center;
+  //margin-top: 113px;
+
+  position: absolute;
+  bottom: @page-card-padding-x;
+  right: @page-card-padding-x;
 
   span {
     margin-top: 0 !important;
-    font-size: 180% !important;
+    font-size: 120% !important;
+    //font-size: 180% !important;
   }
 }
diff --git a/packages/leaa-dashboard/src/layouts/AuthLayout/AuthLayout.tsx b/packages/leaa-dashboard/src/layouts/AuthLayout/AuthLayout.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { RouteProps, RouteComponentProps } from 'react-router-dom';
 
 import { IRouteItem } from '@leaa/dashboard/src/interfaces';
-import { DefaultLayout } from '@leaa/dashboard/src/layouts';
+import { BaseLayout } from '@leaa/dashboard/src/layouts';
 
 import '@leaa/dashboard/src/styles/global.less';
 
@@ -13,7 +13,7 @@ interface IProps extends RouteProps {
 
 export const AuthLayout = (props: IProps) => {
   return (
-    <DefaultLayout
+    <BaseLayout
       component={(matchProps: RouteComponentProps) => {
         return (
           <div className="g-full-layout-wrapper">

diff --git a/...c/layouts/DefaultLayout/DefaultLayout.tsx → ...ard/src/layouts/BaseLayout/BaseLayout.tsx b/...c/layouts/DefaultLayout/DefaultLayout.tsx → ...ard/src/layouts/BaseLayout/BaseLayout.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { Route, RouteProps } from 'react-router-dom';
 
-interface IDefaultLayoutParam extends RouteProps {
+interface IBaseLayoutParam extends RouteProps {
   component: any;
 }
 
-export const DefaultLayout = ({ component: Component, ...rest }: IDefaultLayoutParam) => (
+export const BaseLayout = ({ component: Component, ...rest }: IBaseLayoutParam) => (
   <Route {...rest} render={(matchProps: RouteProps) => <Component {...matchProps} />} />
 );
diff --git a/packages/leaa-dashboard/src/layouts/MasterLayout/MasterLayout.tsx b/packages/leaa-dashboard/src/layouts/MasterLayout/MasterLayout.tsx
@@ -6,7 +6,7 @@ import { LoadingOutlined } from '@ant-design/icons';
 
 import { transRouterPathToClassName, checkAuthIsAvailably } from '@leaa/dashboard/src/utils';
 import { IRouteItem } from '@leaa/dashboard/src/interfaces';
-import { DefaultLayout } from '@leaa/dashboard/src/layouts';
+import { BaseLayout } from '@leaa/dashboard/src/layouts';
 import { history } from '@leaa/dashboard/src/libs';
 import '@leaa/dashboard/src/styles/global.less';
 
@@ -37,7 +37,7 @@ export const MasterLayout = (props: IProps) => {
   }, []);
 
   return (
-    <DefaultLayout
+    <BaseLayout
       component={(matchProps: RouteComponentProps) => {
         const pageClassName =
           matchProps && matchProps.match.url ? `page-${transRouterPathToClassName(matchProps.match.url)}` : null;

diff --git a/packages/leaa-dashboard/src/layouts/index.tsx b/packages/leaa-dashboard/src/layouts/index.tsx
@@ -1,3 +1,3 @@
 export { AuthLayout } from './AuthLayout/AuthLayout';
 export { MasterLayout } from './MasterLayout/MasterLayout';
-export { DefaultLayout } from './DefaultLayout/DefaultLayout';
+export { BaseLayout } from './BaseLayout/BaseLayout';
diff --git a/packages/leaa-dashboard/src/views/index.ejs → ...es/leaa-dashboard/src/pages/_document.ejs b/packages/leaa-dashboard/src/views/index.ejs → ...es/leaa-dashboard/src/pages/_document.ejs
@@ -6,8 +6,8 @@
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
   <meta name="renderer" content="webkit">
-  <meta name="viewport"
-        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+  <meta name="keywords" content="<%= htmlWebpackPlugin.options.title %>,leaa,dashboard,leaa-dashboard" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   <!--
   manifest.json provides metadata used when your web app is installed on a
   user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -17,8 +17,9 @@
   <script src="<%= htmlWebpackPlugin.options.__ENV_FILE__ %>?<%= htmlWebpackPlugin.options.version_hash %>"></script>
 </head>
 <body>
-<div id="app"></div>
-<script id="__BUILD_DATA__" type="application/json"><%= htmlWebpackPlugin.options.__BUILD_DATA__ %></script>
-<%= htmlWebpackPlugin.options.__ANALYTICS_CODE__ %>
+  <noscript>Out-of-the-box mid-stage front/design solution!</noscript>
+  <div id="app"></div>
+  <script id="__BUILD_DATA__" type="application/json"><%= htmlWebpackPlugin.options.__BUILD_DATA__ %></script>
+  <%= htmlWebpackPlugin.options.__ANALYTICS_CODE__ %>
 </body>
 </html>
diff --git a/packages/leaa-dashboard/src/routes/auth.route.tsx b/packages/leaa-dashboard/src/routes/auth.route.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
 import { Route } from 'react-router-dom';
 import { IRouteItem, IPage } from '@leaa/dashboard/src/interfaces';
-import { ALLOW_PERMISSION, LOADABLE_DELAY } from '@leaa/dashboard/src/constants';
-import loadable from '@loadable/component';
-import pMinDelay from 'p-min-delay';
+import { ALLOW_PERMISSION } from '@leaa/dashboard/src/constants';
+import { lazy } from '@loadable/component';
 
 import { Spinner } from '@leaa/dashboard/src/components';
 import { AuthLayout } from '@leaa/dashboard/src/layouts';
@@ -14,9 +13,7 @@ export const authRoutes: IRouteItem[] = [
     namei18n: '_route:login',
     permission: ALLOW_PERMISSION,
     path: '/login',
-    LazyComponent: loadable(() =>
-      pMinDelay(import(/* webpackChunkName: 'Login' */ '../pages/Auth/Login/Login'), LOADABLE_DELAY),
-    ),
+    LazyComponent: lazy(() => import(/* webpackChunkName: 'Login' */ '../pages/Auth/Login/Login')),
     exact: true,
   },
 ];
@@ -25,9 +22,11 @@ export const authRoute = authRoutes.map((item: IRouteItem) => (
   <Route key={item.path} exact={item.exact} path={item.path}>
     <AuthLayout
       route={item}
-      component={(matchProps: IPage) => {
-        return item.LazyComponent && <item.LazyComponent {...matchProps} fallback={<Spinner />} />;
-      }}
+      component={(matchProps: IPage) => (
+        <React.Suspense fallback={<Spinner />}>
+          {item.LazyComponent && <item.LazyComponent {...matchProps} />}
+        </React.Suspense>
+      )}
     />
   </Route>
 ));
diff --git a/packages/leaa-dashboard/src/routes/index.tsx b/packages/leaa-dashboard/src/routes/index.tsx
@@ -1,4 +1,3 @@
 export * from './master.route';
 export * from './auth.route';
-export * from './test.route';
 export * from './other.route';