去年接触了公司内一个开发运行了两年多的项目,整体应用是基于 React 技术栈的,多个单页应用有构成了多页应用。可以理解为比较独立的子业务之间是 MPA 形式跳转,而子业务内部则是 SPA 形式。
项目的构建使用了 webpack,发现存在较大问题:
- 在生产环境上线编译大致需要 13 min+;
- 本地开发环境下,代码改动后的热更新(增量编译)需要大概 10~20s 的时间,使得开发体验很差。
相信这些问题在很多上线迭代了很长时间的、使用了 webpack 的团队中都会遇到,所以把自己的优化实践经历写出来,和大家交流下。我在优化的时候也参考了许多网络上介绍的优化手段,当然,有些具有不错效果,有些可能对我们来说不适用。这并不是一篇罗列各种 webpack 优化技巧的文章,除了优化实践,还会有一些期间的反思。