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 />;
  }
}