React code splitting 优化build输出

1 最近发布版本，发现build出来的main.chunk.js居然有1.8M那么多，一些网络慢的地方加载起来非常蛋疼，开始通过webpack的splitChunks进行代码分割，把1.8M的大js文件分割为小的，并发加载，可以参考文章 https://imweb.io/topic/5b66dd601402769b60847149，实际上就是通过检测把node_module里面大的模块独立到一个js文件，而不是全部打包一起，可以参考以下代码：

WechatIMG161.png

以上不是本文讨论重点。

2 即便用了上面的，会发现一旦minSize的值不是特别小，比如0，你自己的js component还是会全部打包到main.chunk里面，要解决这个，可以使用react提供的lazy功能，参考：https://zh-hans.reactjs.org/docs/code-splitting.html#reactlazy

首先把非首屏需要显示的page，放到一个地方，比如wrapcomponent里面
比如下面代码所示：

1567065706643.jpg

使用的地方这样引用：

1567065769435.jpg

然后根据实际情况设置webpack里面splitChunks的minsize，最后对比一下使用code split前后build出来的包里面的文件：

原来的js文件：

1567065861867.jpg

新的js文件：

1.jpg

最大的js文件从2.5M减少到1.1M