diff --git a/package.json b/package.json
index b5f49b194489c1f56e12af408907f998f446363b..1c372b6f165a15afd4c6d4922ffee8835b7e9ae0 100755
--- a/package.json
+++ b/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",
diff --git a/src/common/router.js b/src/common/router.js
index e7312c4820316061b61cff77a020c932df43e66f..25379fb9adbf3430979111fc264f846a72423f82 100644
--- a/src/common/router.js
+++ b/src/common/router.js
@@ -1,6 +1,7 @@
-import { createElement } from 'react';
-import dynamic from 'dva/dynamic';
+import React, { createElement } from 'react';
+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({
-    app,
-    models: () =>
-      models.filter(model => modelNotExisted(app, model)).map(m => import(`../models/${m}.js`)),
-    // add routerData prop
-    component: () => {
+  return Loadable({
+    loader: () => {
       if (!routerDataCache) {
         routerDataCache = getRouterData(app);
       }
@@ -51,6 +50,9 @@ const dynamicWrapper = (app, models, component) => {
           });
       });
     },
+    loading: () => {
+      return <Spin size="large" className="global-spin" />;
+    },
   });
 };
 
diff --git a/src/index.less b/src/index.less
index 5cfe914a4cec038c252fa4f0069e50b11b8cc6cc..3a277746da655bb51320bc4e39ee2635dcc96d6d 100644
--- a/src/index.less
+++ b/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;
+  }
 }
diff --git a/src/router.js b/src/router.js
index 15e2634ad76f8d090f55ff8fda34021d8007866b..9eb5a11604d99cd90c2845598da56519a274e60c 100644
--- a/src/router.js
+++ b/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);