webpack react 文件压缩优化
这两天，将之前练习的项目整理的同时，把之前遗留了一些组件未实现的逻辑实现了。例如：loading失败点击重试的逻辑。
在打包生产环境代码的时候，发现2个问题还比较重要，在这里记录一下。
代码太大
编译出output，发布到线上后打开页面，发现bundle js有1.3M之多，这对于移动设备来说很难忍受，要下载10秒以上。
优化方式2个：
- 为nginx开启gzip，大约从1.3M压缩到了800K，这一块不错的介绍参考这个博客。
|
1 2 3 4 5 6 |
gzip on; gzip_comp_level 4; gzip_buffers 4 16k; gzip_min_length 1k; gzip_vary on; gzip_types *; |
- 压缩js代码，这需要用到webpack自带的一个插件UglifyJsPlugin，这个改动可以看webpack-production.config.js生产环境配置（github）。
出现warning
在开启了webpack代码压缩之后，发现访问app时console里有这样的warning：
It looks like you’re using a minified copy of the development build of React……
我明明执行了npm run deploy来编译生产环境代码，为什么提示我压缩的代码不属于生产环境呢？
命令npm run deploy，是在package.json中定义过，可以看下面。可见，我显然传入了NODE_ENV=production，为何没有生效？
|
1 2 3 4 5 6 7 8 |
{ "name": "node", "version": "1.0.0", "main": "app.js", "scripts": { "start": "webpack-dev-server", "deploy": "NODE_ENV=production webpack -p --config webpack-production.config.js" }, |
经过谷歌，具体解决方法参考这里，我在github里也添加这对应的插件解决这个问题。
成果
经过nginx gzip和webpack共同压缩后，代码从1.3M降到130KB，效果非常显著！
可以访问这个URL来体验首次加载的速度（点我进入，记得强制刷新浏览器）。
PS：我的博客在日本服务器，130K的尺寸在国内应该可以瞬间完成下载。
如果文章帮助您解决了工作难题，您可以帮我点击屏幕上的任意广告，或者赞助少量费用来支持我的持续创作，谢谢~
