【20190828】webpack 多线程构建速度测试

[zhongxia245]

时间：2019-08-28 15:56:54
作者：zhongxia

先说明下机器配置，以及项目代码情况。

机器配置
MacBook Pro (Retina, 13-inch, Early 2015)
CPU：2.7 GHz Intel Core i5
Memory：8 GB 1867 MHz DDR3
GPU：Intel Iris Graphics 6100 1536 MB

项目情况
使用 cloc 来统计代码情况
多页面应用，pug 文件50个，大概有50个页面, 5W 行代码（可能会少一两个，去掉 base.pug 之类的）

环境参数
Node：v11.14.0
Webpack：4.39.2

构建时间比较

分了几种情况进行比较

• 常规构建
• 多线程 loader 构建
• 多线程压缩
• 多线程 loader + 多线程压缩 （两种压缩插件）
  • terser-webpack-plugin 《官网介绍到的》
  • uglifyjs-webpack-plugin （社区中比较常用的）

webpack 4.39.2	常规	happypack	uglifyjs-webpack-plugin	happy pack + terser-webpack-plugin	happy pack + uglifyjs-webpack-plugin
第一次	43101ms	31419ms	47306ms	34448ms	41926ms
第二次	43624ms	38050ms	39695ms	35035ms	47403ms
第三次	39779ms	37103ms	40698ms	46281ms	39874ms
第四次	39483ms	34824ms	40045ms	38471ms	40078ms
第五次	44020ms	34886ms	39591ms	43642ms	34129ms
平均数	42001ms	35256ms	41467ms	39575ms	40682ms

从上面的五次构建时间的平均数来看，得出以下结论

• 使用 happypack 性能提升 16% 左右 / (42001-35356) / 42001 = 16%
• 使用多线程压缩代码，性能的提升太小可以忽略了
• happypack + 多线程压缩， 性能的提升反而不如单独使用 happypack

结论

从该项目的构建情况上来看，happypack 对性能有一定的提升（16%），多线程压缩则提升很少，还反而下降了。

因此在考虑 多线程构建的时候，使用多线程 loader （happypack）即可， 多线程压缩就算了。

[zhongxia245]

补充一些相关多线程配置的webpack plugins 文档

1. happypack
2. uglifyjs-webpack-plugin
3. terser-webpack-plugin