Webpack3如何实现React16的代码分割？

本文共计1246个文字，预计阅读时间需要5分钟。

项目背景：最近项目中有一个版本较老的webpack项目，由于升级和框架更换，暂时未被leader层接受优化。只能在现有条件下进行优化。

webpack版本：webpack3 + react16

webpack v3 配置检查：非常明显，项目的配置是从webpack配置模板直接复制的。

项目背景

最近项目里有个webpack版本较老的项目，由于升级和换框架暂时不被leader层接受o(╥﹏╥)o，只能在现有条件进行优化。

webpack3 + react16

webpack v3配置检查

很明显项目的配置是从v1继承过来的，v1->v3的升级较为简单，参考官网webpack.js.org/migrate/3/即可。

loaders变为rules
不再支持链式写法的loader，json-loader不需要配置
UglifyJsPlugin插件需要自己开启minimize

分析现有包的问题

使用webpack-bundle-analyzer构建包后，如图

问题非常明显：

除了zxcvbn这个较大的包被拆出来，代码就简单的打包为了vender和app，文件很大。