react-router4 +react-loadable 實現Code Splitting

以前在react-router中文官方文檔使用的是require。ensure實現按需加載，升級以後，這個方法就走不通了。
以後看了react-router的官網，按需加載只須要神器 react-loadable 。
react-loadable的好處：

1. 基於import()的自動代碼拆分
   import()的厲害之處在於 Webpack 2 能夠自動拆分代碼，不論你在什麼時候加入新代碼，都不用作其餘額外的工做，你能夠經過切換 import() 位置來輕易試驗代碼拆分點，以便讓你的app達到最佳性能。

2. 避免組件加載閃爍
   Loading組件須要接收一個pastDelay prop(默認200ms)
   export default function Loading({ error, pastDelay }) {

   if (error) {
      return <div>Error!</div>;
    } else if (pastDelay) {
      return <div>Loading...</div>;
    } else {
      return null;
    }

   }

3. 預加載
   Loadable 建立的組件向外暴露了一個用於預加載的靜態方法：組件.preload()
   最後說到webpack搭配react-loadable實現懶加載：
   使用到的庫有：react-loadable+plugin-syntax-dynamic-import
   在 .babelrc進行以下配置：

   {
    "presets": [
      "react"
    ],
    "plugins": [
      "syntax-dynamic-import"
    ]

   }
   完整使用以下：

import Loadable from 'react-loadable';
import Loading from './Loading';

const LoadableComponent = Loadable({
  loader: () => import('./Dashboard'),
  loading: Loading,
})

export default class LoadableDashboard extends React.Component {
  render() {
    return <LoadableComponent />;
  }
}