From 7808f6630c801128576ed8ee3fd852a6f1ddaf5b Mon Sep 17 00:00:00 2001
From: WhatAKitty <104xuqiang@163.com>
Date: Thu, 9 Nov 2017 18:27:17 +0800
Subject: [PATCH 1/5] Dynamic route

---
 src/common/nav.js          | 170 ++++++++++++++++++++++++-------------
 src/layouts/BasicLayout.js |   6 +-
 src/layouts/UserLayout.js  |   2 +-
 src/router.js              |  14 ++-
 4 files changed, 124 insertions(+), 68 deletions(-)

diff --git a/src/common/nav.js b/src/common/nav.js
index 4eb70cf56f..3ae76be390 100644
--- a/src/common/nav.js
+++ b/src/common/nav.js
@@ -1,40 +1,10 @@
-import BasicLayout from '../layouts/BasicLayout';
-import UserLayout from '../layouts/UserLayout';
-import BlankLayout from '../layouts/BlankLayout';
-
-import Analysis from '../routes/Dashboard/Analysis';
-import Monitor from '../routes/Dashboard/Monitor';
-import Workplace from '../routes/Dashboard/Workplace';
-
-import TableList from '../routes/List/TableList';
-import CoverCardList from '../routes/List/CoverCardList';
-import CardList from '../routes/List/CardList';
-import FilterCardList from '../routes/List/FilterCardList';
-import SearchList from '../routes/List/SearchList';
-import BasicList from '../routes/List/BasicList';
-
-import BasicProfile from '../routes/Profile/BasicProfile';
-import AdvancedProfile from '../routes/Profile/AdvancedProfile';
-
-import BasicForm from '../routes/Forms/BasicForm';
-import AdvancedForm from '../routes/Forms/AdvancedForm';
-import StepForm from '../routes/Forms/StepForm';
-import Step2 from '../routes/Forms/StepForm/Step2';
-import Step3 from '../routes/Forms/StepForm/Step3';
-
-import Exception403 from '../routes/Exception/403';
-import Exception404 from '../routes/Exception/404';
-import Exception500 from '../routes/Exception/500';
-
-import Success from '../routes/Result/Success';
-import Error from '../routes/Result/Error';
-
-import Login from '../routes/User/Login';
-import Register from '../routes/User/Register';
-import RegisterResult from '../routes/User/RegisterResult';
+import dynamic from 'dva/dynamic';
 
 const data = [{
-  component: BasicLayout,
+  component: app => dynamic({
+    app,
+    component: () => import('../layouts/BasicLayout'),
+  }),
   layout: 'BasicLayout',
   name: '首页', // for breadcrumb
   path: '',
@@ -45,15 +15,24 @@ const data = [{
     children: [{
       name: '分析页',
       path: 'analysis',
-      component: Analysis,
+      component: app => dynamic({
+        app,
+        component: () => import('../routes/Dashboard/Analysis'),
+      }),
     }, {
       name: '监控页',
       path: 'monitor',
-      component: Monitor,
+      component: app => dynamic({
+        app,
+        component: () => import('../routes/Dashboard/Monitor'),
+      }),
     }, {
       name: '工作台',
       path: 'workplace',
-      component: Workplace,
+      component: app => dynamic({
+        app,
+        component: () => import('../routes/Dashboard/Workplace'),
+      }),
     }],
   }, {
     name: '表单页',
@@ -62,22 +41,37 @@ const data = [{
     children: [{
       name: '基础表单',
       path: 'basic-form',
-      component: BasicForm,
+      component: app => dynamic({
+        app,
+        component: () => import('../routes/Forms/BasicForm'),
+      }),
     }, {
       name: '分步表单',
       path: 'step-form',
-      component: StepForm,
+      component: app => dynamic({
+        app,
+        component: () => import('../routes/Forms/StepForm'),
+      }),
       children: [{
         path: 'confirm',
-        component: Step2,
+        component: app => dynamic({
+          app,
+          component: () => import('../routes/Forms/StepForm/Step2'),
+        }),
       }, {
         path: 'result',
-        component: Step3,
+        component: app => dynamic({
+          app,
+          component: () => import('../routes/Forms/StepForm/Step3'),
+        }),
       }],
     }, {
       name: '高级表单',
       path: 'advanced-form',
-      component: AdvancedForm,
+      component: app => dynamic({
+        app,
+        component: () => import('../routes/Profile/AdvancedProfile'),
+      }),
     }],
   }, {
     name: '列表页',
@@ -86,27 +80,45 @@ const data = [{
     children: [{
       name: '查询表格',
       path: 'table-list',
-      component: TableList,
+      component: app => dynamic({
+        app,
+        component: () => import('../routes/List/TableList'),
+      }),
     }, {
       name: '标准列表',
       path: 'basic-list',
-      component: BasicList,
+      component: app => dynamic({
+        app,
+        component: () => import('../routes/List/BasicList'),
+      }),
     }, {
       name: '卡片列表',
       path: 'card-list',
-      component: CardList,
+      component: app => dynamic({
+        app,
+        component: () => import('../routes/List/CardList'),
+      }),
     }, {
       name: '搜索列表（项目）',
       path: 'cover-card-list',
-      component: CoverCardList,
+      component: app => dynamic({
+        app,
+        component: () => import('../routes/List/CoverCardList'),
+      }),
     }, {
       name: '搜索列表（应用）',
       path: 'filter-card-list',
-      component: FilterCardList,
+      component: app => dynamic({
+        app,
+        component: () => import('../routes/List/FilterCardList'),
+      }),
     }, {
       name: '搜索列表（文章）',
       path: 'search',
-      component: SearchList,
+      component: app => dynamic({
+        app,
+        component: () => import('../routes/List/SearchList'),
+      }),
     }],
   }, {
     name: '详情页',
@@ -115,11 +127,17 @@ const data = [{
     children: [{
       name: '基础详情页',
       path: 'basic',
-      component: BasicProfile,
+      component: app => dynamic({
+        app,
+        component: () => import('../routes/Profile/BasicProfile'),
+      }),
     }, {
       name: '高级详情页',
       path: 'advanced',
-      component: AdvancedProfile,
+      component: app => dynamic({
+        app,
+        component: () => import('../routes/Profile/AdvancedProfile'),
+      }),
     }],
   }, {
     name: '结果',
@@ -128,11 +146,17 @@ const data = [{
     children: [{
       name: '成功',
       path: 'success',
-      component: Success,
+      component: app => dynamic({
+        app,
+        component: () => import('../routes/Result/Success'),
+      }),
     }, {
       name: '失败',
       path: 'fail',
-      component: Error,
+      component: app => dynamic({
+        app,
+        component: () => import('../routes/Result/Error'),
+      }),
     }],
   }, {
     name: '异常',
@@ -141,19 +165,31 @@ const data = [{
     children: [{
       name: '403',
       path: '403',
-      component: Exception403,
+      component: app => dynamic({
+        app,
+        component: () => import('../routes/Exception/403'),
+      }),
     }, {
       name: '404',
       path: '404',
-      component: Exception404,
+      component: app => dynamic({
+        app,
+        component: () => import('../routes/Exception/404'),
+      }),
     }, {
       name: '500',
       path: '500',
-      component: Exception500,
+      component: app => dynamic({
+        app,
+        component: () => import('../routes/Exception/500'),
+      }),
     }],
   }],
 }, {
-  component: UserLayout,
+  component: app => dynamic({
+    app,
+    component: () => import('../layouts/UserLayout'),
+  }),
   layout: 'UserLayout',
   children: [{
     name: '帐户',
@@ -162,19 +198,31 @@ const data = [{
     children: [{
       name: '登录',
       path: 'login',
-      component: Login,
+      component: app => dynamic({
+        app,
+        component: () => import('../routes/User/Login'),
+      }),
     }, {
       name: '注册',
       path: 'register',
-      component: Register,
+      component: app => dynamic({
+        app,
+        component: () => import('../routes/User/Register'),
+      }),
     }, {
       name: '注册结果',
       path: 'register-result',
-      component: RegisterResult,
+      component: app => dynamic({
+        app,
+        component: () => import('../routes/User/RegisterResult'),
+      }),
     }],
   }],
 }, {
-  component: BlankLayout,
+  component: app => dynamic({
+    app,
+    component: () => import('../layouts/BlankLayout'),
+  }),
   layout: 'BlankLayout',
   children: {
     name: '使用文档',
diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js
index 47fd8782cd..37a45cc07c 100644
--- a/src/layouts/BasicLayout.js
+++ b/src/layouts/BasicLayout.js
@@ -159,7 +159,7 @@ class BasicLayout extends React.PureComponent {
               >
                 {icon}<span>{item.name}</span>
               </Link>
-            )
+              )
           }
         </Menu.Item>
       );
@@ -239,7 +239,7 @@ class BasicLayout extends React.PureComponent {
     }
   }
   render() {
-    const { currentUser, collapsed, fetchingNotices } = this.props;
+    const { app, currentUser, collapsed, fetchingNotices } = this.props;
 
     const menu = (
       <Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>
@@ -352,7 +352,7 @@ class BasicLayout extends React.PureComponent {
                       exact={item.exact}
                       key={item.path}
                       path={item.path}
-                      component={item.component}
+                      component={item.component(app)}
                     />
                   )
                 )
diff --git a/src/layouts/UserLayout.js b/src/layouts/UserLayout.js
index 923983d0da..c6212a568a 100644
--- a/src/layouts/UserLayout.js
+++ b/src/layouts/UserLayout.js
@@ -59,7 +59,7 @@ class UserLayout extends React.PureComponent {
                   exact={item.exact}
                   key={item.path}
                   path={item.path}
-                  component={item.component}
+                  component={item.component(this.props.app)}
                 />
               )
             )
diff --git a/src/router.js b/src/router.js
index cb53d6d1f6..2fd1aeaae4 100644
--- a/src/router.js
+++ b/src/router.js
@@ -2,10 +2,18 @@ import React from 'react';
 import { Router, Route, Switch } from 'dva/router';
 import { LocaleProvider } from 'antd';
 import zhCN from 'antd/lib/locale-provider/zh_CN';
-import BasicLayout from './layouts/BasicLayout';
-import UserLayout from './layouts/UserLayout';
+import dynamic from 'dva/dynamic';
+
+function RouterConfig({ history, app }) {
+  const BasicLayout = dynamic({
+    app,
+    component: () => import('./layouts/BasicLayout'),
+  });
+  const UserLayout = dynamic({
+    app,
+    component: () => import('./layouts/UserLayout'),
+  });
 
-function RouterConfig({ history }) {
   return (
     <LocaleProvider locale={zhCN}>
       <Router history={history}>

From c67c7699de2c70112c6aa953cc5068d8f2cbef6c Mon Sep 17 00:00:00 2001
From: WhatAKitty <104xuqiang@163.com>
Date: Thu, 9 Nov 2017 23:39:28 +0800
Subject: [PATCH 2/5] Load models on demand

---
 src/common/nav.js | 62 ++++++++++++++++++++++++++++++++++++++++++++++-
 src/index.js      |  7 ++----
 src/router.js     |  7 ++++--
 3 files changed, 68 insertions(+), 8 deletions(-)

diff --git a/src/common/nav.js b/src/common/nav.js
index 3ae76be390..c355a2a1a3 100644
--- a/src/common/nav.js
+++ b/src/common/nav.js
@@ -3,11 +3,14 @@ import dynamic from 'dva/dynamic';
 const data = [{
   component: app => dynamic({
     app,
+    models: () => [
+      import('../models/user'),
+    ],
     component: () => import('../layouts/BasicLayout'),
   }),
   layout: 'BasicLayout',
   name: '首页', // for breadcrumb
-  path: '',
+  path: '/',
   children: [{
     name: 'Dashboard',
     icon: 'dashboard',
@@ -17,6 +20,9 @@ const data = [{
       path: 'analysis',
       component: app => dynamic({
         app,
+        models: () => [
+          import('../models/chart'),
+        ],
         component: () => import('../routes/Dashboard/Analysis'),
       }),
     }, {
@@ -24,6 +30,9 @@ const data = [{
       path: 'monitor',
       component: app => dynamic({
         app,
+        models: () => [
+          import('../models/monitor'),
+        ],
         component: () => import('../routes/Dashboard/Monitor'),
       }),
     }, {
@@ -31,6 +40,11 @@ const data = [{
       path: 'workplace',
       component: app => dynamic({
         app,
+        models: () => [
+          import('../models/project'),
+          import('../models/activities'),
+          import('../models/chart'),
+        ],
         component: () => import('../routes/Dashboard/Workplace'),
       }),
     }],
@@ -43,6 +57,9 @@ const data = [{
       path: 'basic-form',
       component: app => dynamic({
         app,
+        models: () => [
+          import('../models/form'),
+        ],
         component: () => import('../routes/Forms/BasicForm'),
       }),
     }, {
@@ -50,18 +67,27 @@ const data = [{
       path: 'step-form',
       component: app => dynamic({
         app,
+        models: () => [
+          import('../models/form'),
+        ],
         component: () => import('../routes/Forms/StepForm'),
       }),
       children: [{
         path: 'confirm',
         component: app => dynamic({
           app,
+          models: () => [
+            import('../models/form'),
+          ],
           component: () => import('../routes/Forms/StepForm/Step2'),
         }),
       }, {
         path: 'result',
         component: app => dynamic({
           app,
+          models: () => [
+            import('../models/form'),
+          ],
           component: () => import('../routes/Forms/StepForm/Step3'),
         }),
       }],
@@ -70,6 +96,9 @@ const data = [{
       path: 'advanced-form',
       component: app => dynamic({
         app,
+        models: () => [
+          import('../models/form'),
+        ],
         component: () => import('../routes/Profile/AdvancedProfile'),
       }),
     }],
@@ -82,6 +111,9 @@ const data = [{
       path: 'table-list',
       component: app => dynamic({
         app,
+        models: () => [
+          import('../models/rule'),
+        ],
         component: () => import('../routes/List/TableList'),
       }),
     }, {
@@ -89,6 +121,9 @@ const data = [{
       path: 'basic-list',
       component: app => dynamic({
         app,
+        models: () => [
+          import('../models/list'),
+        ],
         component: () => import('../routes/List/BasicList'),
       }),
     }, {
@@ -96,6 +131,9 @@ const data = [{
       path: 'card-list',
       component: app => dynamic({
         app,
+        models: () => [
+          import('../models/list'),
+        ],
         component: () => import('../routes/List/CardList'),
       }),
     }, {
@@ -103,6 +141,9 @@ const data = [{
       path: 'cover-card-list',
       component: app => dynamic({
         app,
+        models: () => [
+          import('../models/list'),
+        ],
         component: () => import('../routes/List/CoverCardList'),
       }),
     }, {
@@ -110,6 +151,9 @@ const data = [{
       path: 'filter-card-list',
       component: app => dynamic({
         app,
+        models: () => [
+          import('../models/list'),
+        ],
         component: () => import('../routes/List/FilterCardList'),
       }),
     }, {
@@ -117,6 +161,9 @@ const data = [{
       path: 'search',
       component: app => dynamic({
         app,
+        models: () => [
+          import('../models/list'),
+        ],
         component: () => import('../routes/List/SearchList'),
       }),
     }],
@@ -129,6 +176,9 @@ const data = [{
       path: 'basic',
       component: app => dynamic({
         app,
+        models: () => [
+          import('../models/profile'),
+        ],
         component: () => import('../routes/Profile/BasicProfile'),
       }),
     }, {
@@ -136,6 +186,9 @@ const data = [{
       path: 'advanced',
       component: app => dynamic({
         app,
+        models: () => [
+          import('../models/profile'),
+        ],
         component: () => import('../routes/Profile/AdvancedProfile'),
       }),
     }],
@@ -190,6 +243,7 @@ const data = [{
     app,
     component: () => import('../layouts/UserLayout'),
   }),
+  path: '/user',
   layout: 'UserLayout',
   children: [{
     name: '帐户',
@@ -200,6 +254,9 @@ const data = [{
       path: 'login',
       component: app => dynamic({
         app,
+        models: () => [
+          import('../models/login'),
+        ],
         component: () => import('../routes/User/Login'),
       }),
     }, {
@@ -207,6 +264,9 @@ const data = [{
       path: 'register',
       component: app => dynamic({
         app,
+        models: () => [
+          import('../models/register'),
+        ],
         component: () => import('../routes/User/Register'),
       }),
     }, {
diff --git a/src/index.js b/src/index.js
index 3b14543418..d2dd78cd61 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,5 @@
 import dva from 'dva';
 import 'moment/locale/zh-cn';
-import models from './models';
 import './polyfill';
 import './g2';
 // import { browserHistory } from 'dva/router';
@@ -14,10 +13,8 @@ const app = dva({
 // 2. Plugins
 // app.use({});
 
-// 3. Model move to router
-models.forEach((m) => {
-  app.model(m);
-});
+// 3. Register global model
+app.model(require('./models/global'));
 
 // 4. Router
 app.router(require('./router'));
diff --git a/src/router.js b/src/router.js
index 2fd1aeaae4..0000e97875 100644
--- a/src/router.js
+++ b/src/router.js
@@ -7,6 +7,9 @@ import dynamic from 'dva/dynamic';
 function RouterConfig({ history, app }) {
   const BasicLayout = dynamic({
     app,
+    models: () => [
+      import('./models/user'),
+    ],
     component: () => import('./layouts/BasicLayout'),
   });
   const UserLayout = dynamic({
@@ -18,8 +21,8 @@ function RouterConfig({ history, app }) {
     <LocaleProvider locale={zhCN}>
       <Router history={history}>
         <Switch>
-          <Route path="/user" component={UserLayout} />
-          <Route path="/" component={BasicLayout} />
+          <Route path="/user" render={props => <UserLayout {...props} app={app} />} />
+          <Route path="/" render={props => <BasicLayout {...props} app={app} />} />
         </Switch>
       </Router>
     </LocaleProvider>

From eb971d36aed0518b82bbf9480a8f9808663ec139 Mon Sep 17 00:00:00 2001
From: WhatAKitty <104xuqiang@163.com>
Date: Fri, 10 Nov 2017 01:06:33 +0800
Subject: [PATCH 3/5] Fix wrong import

---
 src/common/nav.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/nav.js b/src/common/nav.js
index c355a2a1a3..e073b47902 100644
--- a/src/common/nav.js
+++ b/src/common/nav.js
@@ -99,7 +99,7 @@ const data = [{
         models: () => [
           import('../models/form'),
         ],
-        component: () => import('../routes/Profile/AdvancedProfile'),
+        component: () => import('../routes/Forms/AdvancedForm'),
       }),
     }],
   }, {

From 0d9b229c477e82e6368829d48b4774258c3868b7 Mon Sep 17 00:00:00 2001
From: WhatAKitty <104xuqiang@163.com>
Date: Fri, 10 Nov 2017 13:37:33 +0800
Subject: [PATCH 4/5] Format code

---
 src/layouts/BasicLayout.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js
index 37a45cc07c..3ba0ad3c66 100644
--- a/src/layouts/BasicLayout.js
+++ b/src/layouts/BasicLayout.js
@@ -159,7 +159,7 @@ class BasicLayout extends React.PureComponent {
               >
                 {icon}<span>{item.name}</span>
               </Link>
-              )
+            )
           }
         </Menu.Item>
       );

From 9a584109ce51621a73f0597f180b3d420ab8cfdb Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Tue, 14 Nov 2017 10:46:56 +0800
Subject: [PATCH 5/5] Add spin for dynamic import

---
 src/index.less | 5 +++++
 src/router.js  | 7 ++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/index.less b/src/index.less
index bd58c5d564..047d86cc24 100644
--- a/src/index.less
+++ b/src/index.less
@@ -7,3 +7,8 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+.globalSpin {
+  width: 100%;
+  margin: 40px 0 !important;
+}
diff --git a/src/router.js b/src/router.js
index 0000e97875..c82ce7116f 100644
--- a/src/router.js
+++ b/src/router.js
@@ -1,8 +1,13 @@
 import React from 'react';
 import { Router, Route, Switch } from 'dva/router';
-import { LocaleProvider } from 'antd';
+import { LocaleProvider, Spin } from 'antd';
 import zhCN from 'antd/lib/locale-provider/zh_CN';
 import dynamic from 'dva/dynamic';
+import styles from './index.less';
+
+dynamic.setDefaultLoadingComponent(() => {
+  return <Spin size="large" className={styles.globalSpin} />;
+});
 
 function RouterConfig({ history, app }) {
   const BasicLayout = dynamic({