create-react-app CommonsChunkPlu

使用react做项目，一定离不开create-react-app这个项目，因为该项目是facebook专门打造的为准备使用react功能的开发，制作的脚手架项目，项目中集成了bable（转译器），webpack打包工具等插件。
但是，在公司项目使用create-react-app却出现了项目性能低的问题。具体表现为，每次编译都要半分钟甚至一分钟。打包接近20分钟。极为痛苦。
先说一下项目的配置，项目采用create-react-app集成了antd及echars等组件。起初怀疑是webpack的问题，但是一直没有实际的证据证明。直到项目配置了webpack打包分析工具webpack-bundle-analyzer插件。发现项目打包文件竟达到1.23G。及其庞大。
然后通过打包分析工具，进一步分析，具体由何种引发，发现是antd组件被重复引入。
既然发现了是antd的问题，下一步就去antd的官网看了，在高级配置项中，发现项目可能没有实现按需加载，于是按照他给的方式，进行处理，结果，扑街了。一直报错。于是上网看是否有其他方式可以实现按需加载，发现项目已经是按需加载状态。
后来发现了CommonsChunkPlugin组件，该主键可以将重复的chunk文件进行合并共用。
具体配置为
在webpack.config.dev.js中配置

  plugins: [
      new webpack.optimize.CommonsChunkPlugin({
          minChunks: 2,
          minSize: 0,
          children: true,
          deepChildren: true,
          async: true
    }),
]

说明：webpack打包的代码都是以chunk的形式存储的。但是呢，不同chunk里可能存在相同的模块，CommonsChunkplugin呢，就是把这些不同chunk里重复的模块提取出来放到一个公共chunk里。这个公共chunk只需要下载一次，就可以让所有的chunk都使用了。而且这部分代码可以放到缓存里，这样以后就不用再下载了而且这么做每个chunk的代码也少了，所以每次加载的速度也更快。
启动项目发现打包体积从1.23G减少到了18M,不得不说CommonsChunkPlugin的确是优化利器。