create-react-app优化打包（一）

    今天小编看到就算是按照网上的文章取消了source和devtool,打出来的包也有4m，于是小编开始了一系列艰苦的爬坑流程。总体来说还是收获慢慢，小编的包从4m变成了700k左右，方法也简单，就是常见的2次打包，把打包一次，然后引入html即可，唯一美中不足的是因为webpack版本问题，或者其他原因，小编想用插件动态写入第一次打包地址的时候，都会报错
    

   于是小编只好曲线救国1，动态在index.html里面引入第一次打包后的js地址，如果以后依赖包发生变化，手动修改文件名，小编也是手贱，非要把node_modules打个hash包，去除缓存。

    以下是小编的webpack版本，"webpack": "3.8.1","extract-text-webpack-plugin": "^3.0.2",已经是最新版本，小编很无奈，如果各位看官有啥好办法，教教小编。

    具体办法都靠baidu搜索，加上自己调试，小编大致来说下，新建个webpack.dll.config.js，里面引入依赖 
    

    我们需要在打包依赖前先清理原来的依赖缓存，
    
   小编是把依赖打包后的包放在public文件价下的public，然后在npm run build的时候一起打包过去，大家也可以放在其他地方，只要index.html中路径配置好旧完事，具体代码大家百度吧，这里只要是提醒大家注意清理缓存。

    接下来只要在webpack.config.prod.js，引入new webpack.DllReferencePlugin，按照百度的方法配置就好啦！大家还可以加new webpack.optimize.ModuleConcatenationPlugin()，增加闭包，加快js运行速度，提升客户体验！

    还有一种优化方式的使用externals和new webpack.optimize.CommonsChunkPlugin，具体请百度，也需要在index.html上引入被模块话的js文件，但是小编觉得这个需要引入太多的js不说，打包体积比第一种2次打包的还大很多，而且增加和减少依赖包后也需要修改相应的html中引用，果断不用这种方法！

    文章结尾，小编希望大家能帮忙解决下如何把第一次打包产生的js文件写入index.html的问题，主要是在create-react-app的环境下！