webpack构建过慢测试几款插件的对比

@kvkens 2017-11-11 05:31:18发表于 iuap-design/blog

  • 本文不是入学文章,需要掌握webpack、plugin概念、等一系列计算机知识才可

背景:玩事APP使用uba来进行前端的开发与构建,由于入口文件过多,目前打包构建速度慢,就在昨天,开发的哥们告诉我,已经不行了。hold不住了,开始JS栈溢出了,我一听,必须找方法解决……

起因

由于采用了webpack多页来开发,初期没有考虑那么多的入口,天真的以为2、30个就够了,结果现在我用工具扫描了下,一共是163个入口文件,一个entry都需要按需加载构建要执行4-6次的操作,可想而知163个entry最终内存溢出收场,失败!!!

分析

内存溢出以及JS栈报错,一定是长时间执行任务无法处理完毕,进行了GC回收导致,查阅webpack的开源的issue去查找此类问题,发展不是个例,多数是因为这个自带的压缩插件webpack.optimize.UglifyJsPlugin导致的,它会导致我们build的时候70%的时间是在处理uglifyJs操作。

注:上面说的问题主要表现在webpack 2.x与3.5.x以下,其他版本例如webpack3.8.1官方说没有此问题,有待考证。说的不对你别看啊~😆

解决

当我知道了是压缩插件的问题,我做了一系列的测试,具体如下:

约定:
  • 基于uba的react项目,entry有163个。
  • MacBook Pro
  • OS : MacOSX 10.13
  • node.js :6.11.2 64bit
  • npm : 3.x
压缩插件
实现结果

不考虑压缩后的体积问题

不使用插件压缩时间是:2分33秒

插件 版本 耗时
uglifyJs webpack2内置 7分38秒
uglifyjs-webpack-plugin 0.4.6 4分30秒
fast-uglifyjs-plugin 0.3.0 2分50秒

通过以上数据测试我最终选择了fast-uglifyjs-plugin,在开发同事那里测试了下,速度比我这个还要慢,但是根据测试发现,比之前内存溢出跑不完要好的很多,可以正常构建出来,而且不需要等30-40分了,现在9分就可以跑完,官方改过的uglifyjs-webpack-plugin是13分。

webpack官方说在webpack4的时候彻底拿掉内置的压缩插件,会采用更高性能的压缩作为插件形式存在。我们静候佳音,至少稳定的webpack2是王道。至于最新的webpack3.8.1我会在未来uba版本集成一个版本进去~ 下次聊……