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的尺寸在国内应该可以瞬间完成下载。
如果文章帮助您解决了工作难题,您可以帮我点击屏幕上的任意广告,或者赞助少量费用来支持我的持续创作,谢谢~
