webpack react 文件压缩优化

这两天,将之前练习的项目整理的同时,把之前遗留了一些组件未实现的逻辑实现了。例如:loading失败点击重试的逻辑。

在打包生产环境代码的时候,发现2个问题还比较重要,在这里记录一下。

代码太大

编译出output,发布到线上后打开页面,发现bundle js有1.3M之多,这对于移动设备来说很难忍受,要下载10秒以上。

优化方式2个:

  • 为nginx开启gzip,大约从1.3M压缩到了800K,这一块不错的介绍参考这个博客

  • 压缩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,为何没有生效?

经过谷歌,具体解决方法参考这里,我在github里也添加这对应的插件解决这个问题。

成果

经过nginx gzip和webpack共同压缩后,代码从1.3M降到130KB,效果非常显著!

可以访问这个URL来体验首次加载的速度(点我进入,记得强制刷新浏览器)。

PS:我的博客在日本服务器,130K的尺寸在国内应该可以瞬间完成下载。

如果文章帮助您解决了工作难题,您可以帮我点击屏幕上的任意广告,或者赞助少量费用来支持我的持续创作,谢谢~