webpack + react 优化：缩小js包体积

一，前言

学校这边的项目刚组建好开发团队，前一段时间都在考虑如何前后端分离，如何多人协作开发的问题，恰好上一周陪女朋友去承德写生，能暂时放下工作和学校的事物，有了更多的思考时间。假期期间学习了webpack，并将前端代码进行了迁移，实现了前后端分离。

而最近上线的时候发现打包压缩后的js包达到了477k,首屏渲染时间高达4s，首屏渲染时间超过1.5s都是不能忍的，于是开始尝试研究一下webpack，毕竟只看了几个小时就拿来用了。

剧透，剧透，后面优化到284k，首屏渲染1.5s-2s。

这个时候想起以前boss和我聊职业规划的时候说过，“会用一项技术的人有很多，而出了问题懂得最大程度优化处理的人却没几个”，虽然他举的例子是搜索引擎优化，要高大上得多，但深入学习，积极对待的心态是一样的。谢谢他的引导。

二，思路

前面啰嗦有点多，下面简单说说这次优化的思路。要想解决问题，必先了解问题，我去看了打包后的js，发现了一些问题及优化点。

1. js确实混淆压缩了，可是里面含有大量的开源库的copyright信息，可以去掉。

   （开源大牛们要相信我是尊重以及无敌崇拜你们的，为了性能暂时去掉这些信息，后期会在产品上单开一个页面说明自己用了哪些库以及给出链接（Facebook和Instagram都这样））

2. 引入的React没有切换到产品版本，React给出了下面的提示，良心！

   Warning: It looks like you’re using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See http://facebook.github.io/react/downloads.html for more details.

3. 之前将css也打包进js里面了，因为css和js并行加载，所以可以将css分离出来，因为js远大于css，