webpack性能优化实战

[webpack由浅入深]系列的内容

• 第一层: 了解一个小功能的完整流程. 看完可以满足好奇心和应付原理级别面试.
• 第二层: 源码陪读, webpack源码比较灵活, 自己看容易陷入迷惑. 文章里会贴出关键流程的代码来辅助阅读源码. 如果你正在自己调试, 在这些方法上下断点会节约你宝贵的时间.

因为每次是以小功能出发, 所以文章系列会有前后依赖, 有兴趣的可以关注这个系列.

---

webpack cache 发布3年多了, 在历史包袱中的项目中其实非常好用.

本文会介绍 cache 在一个项目中的实践经验, 和实现流程, 以及了解流程后的一些推论.

webpack cache 实践经验

我的实践经验是基于公司的一个 monorepo 老项目.

效果是单个子项目的dev速度从110秒减少到了7秒, 单个文件改动10秒.

下面说的经验也都是基于这个例子.

合适的使用场景

webpack cache 的效果是用磁盘空间换 compile 速度.

所以在我看来, webpack cache 更合适在本地 dev 的场景使用, 因为本地 dev 触发 compile 比 ci 服务器频繁得多, 并且改动更小, 可以命中更多缓存, 也能大幅提升开发体验.

实践

在实践中, 缓存的命中率没什么可操作性. 优化空间都在减少占用磁盘空间上. 在我的项目中, 我做了以下配置:

1. 如果配置 cache 的文件是读取配置文件的, 要将buildDependencies 配置为你的文件, 而不是 __filename. 在我们公司打包脚本中是一个 webpack-chain 文件.
2. monorepo 子包会有一些公共依赖, 在 module resolve 的时候也会指到主包的 node_modules, 在这种情况下 cache 配置的 cacheDirectory 可以让多个子包指到同一个文件夹, 来节省cache空间. (在 dev 的时候 react-refresh 会产生大几百m的缓存, 是起码可以节省的)
3. 合理设置 maxAge, 超过 maxAge 的未被使用的缓存会被清除.

我的看法是生产设置小, dev看自己电脑空间, 如果足够的话可以不设置. (默认一个月)

webpack cache 实现流程

下面会深入一下 cache 的实现流程, 了解流程除了满足好奇心, 还可以: