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

代码示例:

基础原理:

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

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

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

1.error加载失败 2.timedOut请求超时 3.pastDelay跳转延时(如果加载很快,用户会看到一个页面闪烁,默认200ms)
修改设置:
constLoadableComponent=Loadable({
loader:()=>import('./my-component'),
loading:Loading,
timeout:10000,
delay: 200
});
网友评论