feat: instead of dva/dynamic using react-loadable

package.json

@@ -72,6 +72,7 @@
     "mockjs": "^1.0.1-beta3",
     "prettier": "1.13.5",
     "pro-download": "^1.0.1",
+    "react-loadable": "^5.4.0",
     "redbox-react": "^1.5.0",
     "regenerator-runtime": "^0.12.0",
     "roadhog": "^2.4.2",

src/common/router.js

@@ -1,6 +1,7 @@
-import { createElement } from 'react';
+import React, { createElement } from 'react';
-import dynamic from 'dva/dynamic';
+import { Spin } from 'antd';
 import pathToRegexp from 'path-to-regexp';
+import Loadable from 'react-loadable';
 import { getMenuData } from './menu';
 
 let routerDataCache;
@@ -13,15 +14,17 @@ const modelNotExisted = (app, model) =>
 
 // wrapper of dynamic
 const dynamicWrapper = (app, models, component) => {
+  // register models
+  models.forEach(model => {
+    if (modelNotExisted(app, model)) {
+      // eslint-disable-next-line
+      app.model(require(`../models/${model}`).default);
+    }
+  });
+
   // () => require('module')
   // transformed by babel-plugin-dynamic-import-node-sync
   if (component.toString().indexOf('.then(') < 0) {
-    models.forEach(model => {
-      if (modelNotExisted(app, model)) {
-        // eslint-disable-next-line
-        app.model(require(`../models/${model}`).default);
-      }
-    });
     return props => {
       if (!routerDataCache) {
         routerDataCache = getRouterData(app);
@@ -33,12 +36,8 @@ const dynamicWrapper = (app, models, component) => {
     };
   }
   // () => import('module')
-  return dynamic({
+  return Loadable({
-    app,
+    loader: () => {
-    models: () =>
-      models.filter(model => modelNotExisted(app, model)).map(m => import(`../models/${m}.js`)),
-    // add routerData prop
-    component: () => {
       if (!routerDataCache) {
         routerDataCache = getRouterData(app);
       }
@@ -51,6 +50,9 @@ const dynamicWrapper = (app, models, component) => {
           });
       });
     },
+    loading: () => {
+      return <Spin size="large" className="global-spin" />;
+    },
   });
 };
 

src/index.less

@@ -18,14 +18,14 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
-.globalSpin {
-  width: 100%;
-  margin: 40px 0 !important;
-}
-
 // temp fix for https://github.com/ant-design/ant-design/commit/a1fafb5b727b62cb0be29ce6e9eca8f579d4f8b7
 :global {
   .ant-spin-container {
     overflow: visible !important;
   }
+
+  .global-spin {
+    width: 100%;
+    margin: 40px 0 !important;
+  }
 }

src/router.js

@@ -1,18 +1,13 @@
 import React from 'react';
 import { routerRedux, Route, Switch } from 'dva/router';
-import { LocaleProvider, Spin } from 'antd';
+import { LocaleProvider } from 'antd';
 import zhCN from 'antd/lib/locale-provider/zh_CN';
-import dynamic from 'dva/dynamic';
 import { getRouterData } from './common/router';
 import Authorized from './utils/Authorized';
 import { getQueryPath } from './utils/utils';
-import styles from './index.less';
 
 const { ConnectedRouter } = routerRedux;
 const { AuthorizedRoute } = Authorized;
-dynamic.setDefaultLoadingComponent(() => {
-  return <Spin size="large" className={styles.globalSpin} />;
-});
 
 function RouterConfig({ history, app }) {
   const routerData = getRouterData(app);