dynamic router: #3

jiangxy · Feb 3, 2017 · b575600 · b575600
1 parent f7328fe
commit b575600
Showing 1 changed file with 12 additions and 3 deletions.
diff --git a/src/index.js b/src/index.js
@@ -14,7 +14,16 @@ import App from './components/App';
 import Welcome from './components/Welcome';
 import Error from './components/Error';
 import Hello from './components/Hello';
-import DBTable from './components/DBTable';
+//import DBTable from './components/DBTable';
+
+// 将DBTable组件做成动态路由, 减小bundle size
+// 注意不要再import DBTable了, 不然就没意义了
+// 一些比较大/不常用的组件, 都可以考虑做成动态路由
+const DBTableContainer = (location, cb) => {
+  require.ensure([], require => {
+    cb(null, require('./components/DBTable').default)
+  }, 'DBTable');
+};
 
 // 路由表, 只要menu.js中所有的叶子节点配置了路由就可以了
 // 我本来想根据menu.js自动生成路由表, 但那样太不灵活了, 还是自己配置好些
@@ -25,8 +34,8 @@ const routes = (
         <IndexRoute component={Welcome}/>
 
         <Route path="index">
-          <Route path="option1" tableName="test" component={DBTable}/>
-          <Route path="option2" tableName="testSms" component={DBTable}/>
+          <Route path="option1" tableName="test" getComponent={DBTableContainer}/>
+          <Route path="option2" tableName="testSms" getComponent={DBTableContainer}/>
           <Route path="option3" component={Hello}/>
         </Route>