2.1 cache (节省打包事件最多)

通过配置 webpack 持久化缓存 cache: filesystem，来缓存生成的 webpack 模块和 chunk，改善构建速度。

简单来说，通过 cache: filesystem 可以将构建过程的 webpack 模板进行缓存，大幅提升二次构建速度、打包速度，当构建突然中断，二次进行构建时，可以直接从缓存中拉取，可提速 90% 左右。

webpack.commom.js 配置如下

  1. module.exports = {
  2.     cache: {
  3.       type: 'filesystem', // 使用文件缓存
  4.     },
  5. }

引入缓存后，首次构建时间将增加 15%，二次构建时间将减少 90%，效果如下：

第一次打包时 第二次打包时
image.png image.png

2.2 dll ❌

在 webpack 官网构建性能 中看到关于 dll 的介绍：

dll 可以为更改不频繁的代码生成单独的编译结果。可以提高应用程序的编译速度。

我兴冲冲的开始寻找 dll 的相关配置说明，太复杂了，接着找到了一个辅助配置 dll 的插件 autodll-webpack-plugin，结果上面直接写了 webpack5 开箱即用的持久缓存是比 dll 更优的解决方案。

所以，不用再配置 dll了，上面介绍的 cache 明显更香。

2.3 cache-loader ❌

没错，cache-loader 也不需要引入了，上面的 cache 已经帮助我们缓存了。