通过异步引入加载组件的一个高阶组建
（程序员的文采真是不得不服）路由为中心的代码分割像屎一样，而以组件为中心的代码分割屌的像屎一样。
代码分割图例
代码示例：
基础原理：
主要实现是使用了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
});
网友评论