Webpack5升级能将构建速度提升至何等地步，早行动早受益，你准备好了吗？

本文共计2376个文字，预计阅读时间需要10分钟。

为什么升级？webpack4用得挺好的，运行稳定，为什么还要升级到webpack5？每次升级，都像经历一场地震，处理多个loader和plugin的API的破坏性变化。

为什么要升级?webpack4用的好好的，运行稳定，为什么要升级到webpack5, 每次升级，都要经历一场地震，处理许多loader和plugin API的破坏性改变。 请给我

 为什么要升级?

webpack4用的好好的，运行稳定，为什么要升级到webpack5, 每次升级，都要经历一场地震，处理许多loader和plugin API的破坏性改变。 请给我们一个充分的升级理由，不然真的没有动力去折腾。没问题，给你们一个充分的理由，webpack5对构建速度做了突破性的改进，开启文件缓存之后，再次构建，速度提升明显。在我参与的项目中，本地服务器开发环境，第一次构建速度是38.64s，第二次构建速度是1.69s，提升了一个数量级。My God, 是不是很惊喜，很意外。

 生产打包构建速度，同样有显著提升，第一次打包耗时1.01m,第二次打包耗时10.95s.  看到这里，你是不是有了升级的热情，那请继续往下看。

 

 为什么构建速度有了质的飞跃?

主要是因为：

1.webpack4是根据代码的结构生成chunkhash，添加了空白行或注释，会引起chunkhash的变化，webpack5是根据内容生成chunkhash，改了注释或者变量不会引起chunkhash的变化，浏览器可以继续使用缓存。

2.优化了对缓存的使用效率。在webpack4 中，chunkId与moduleId都是自增id。