2018-11-02

通过异步引入加载组件的一个高阶组建

（程序员的文采真是不得不服）路由为中心的代码分割像屎一样，而以组件为中心的代码分割屌的像屎一样。

代码分割图例

代码示例：

基础原理：

主要实现是使用了 dynamic import （动态引入）的方法，因为动态引入还停留在stage3，所以react-loadable引入了 plugin-syntax-dynamic-import
babel里主要进行处理应是

将原有代码转换成promise

因为webpack2+已经率先使用了stage3的特性，所以我们看到代码中直接使用了import（）。在webpack2.6.0+的版本中，我们可以使用添加注释的方式给生成的 chunk命名。

chunk会命名为my-chunk-name.[hash].chunk.js

为了优化体验，loading组件还可以做很多事情

1.error加载失败 2.timedOut请求超时 3.pastDelay跳转延时（如果加载很快，用户会看到一个页面闪烁，默认200ms）

修改设置：

constLoadableComponent=Loadable({
    loader:()=>import('./my-component'), 
    loading:Loading,
    timeout:10000,
    delay: 200
 });