Webpack3如何实现React16长尾词代码的动态分割？

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

项目背景：最近项目中有一个webpack版本较老的工程，由于升级和框架更换，暂时未获得leader层批准o(╯︵╰︶)o，因此只能在现有条件下进行优化。

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，文件很大。

动态import拆分vender

分析vender的代码，某些大包，例如libphonenumber.js，使用场景不是很频繁，将它拆出来，当使用到相关特性时再请求。