【Webpack】持久化缓存

在生产构建的时候，经常发现很慢很慢，对于Webpack,持久化缓存是一个解决方案

module.exports = {
 cache: {
      type: "filesystem",
    }
}

cache 会在开发 模式被设置成 type: 'memory' 而且在 生产 模式 中被禁用，在生产中通常设置为 'filesystem'，

其他参数

• buildDependencies: 配置在这里的文件一旦变更，缓存会失效

buildDependencies: {
 config: [__filename], // 表示webpack配置的路径
 tsconfig: [join(__dirname, 'tsconfig.json')],
 packagejson: [join(__dirname, 'package.json')],
},

• type: 'memory' | 'filesystem'。 设置 cache 类型为文件系统或者内存
• store: 告诉 webpack 什么时候将数据存放在文件系统中
• version: 缓存数据的版本
• cacheDirectory: 缓存路径，默认是 node_modules/.cache/webpack/
• name:缓存的名称。不同的名字会导致不同的的共存的缓存。默认值为 ${config.name}-${config.mode}

根据webpack-5-prod-cache这篇文章得到的启发，如果想要开启持久化缓存，需要做到几个点

多次构建：确实有多次反复构建的需求（其实这点不太明白，我提交一个mr，不就得构建一次吗，什么叫多次构建）

能恢复缓存：在本地构建，或在 CI 有手段能恢复上次的物理缓存文件

时间长：项目构建时间比较长、开启其他转译器仍无法提速。

对于能恢复缓存,我们需要这么配置，以github actions举例

yaml
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - uses: actions/cache@v2 # 缓存缓存的actions
      with:
        path: |
          node_modules/.cache/webpack
        key: ${{ runner.os }}-webpack-${{ hashFiles('**/lockfiles') }}
        restore-keys: |
          ${{ runner.os }}-webpack-
    - name: Install dependencies
      run: npm install
    - name: Build
      run: npm run build

以上是针对于普通项目，如果对于 MonoRepo，。假设你只改动 packages/lib1, 其他的都没有构建，那么如何跳过这部分改动，Umi 推荐用TuroPack

"build": turbo build

turbo.json

{
  "$schema": "https://turborepo.org/schema.json",
  "baseBranch": "origin/master",
  "pipeline": {
    "build": {
      "dependsOn": ["^build"], // 表示当前任务依赖于其所有依赖项的 `build` 任务
      "outputs": ["dist/**"]
    },
    "dev": {
     "cache": false,
     "persistent": true
    }
  },
  "globalDependencies": [ // 如果这些文件中的任何一个发生了变化，所有的任务的哈希值都会改变，从而导致所有的任务都需要重新运行
    "tsconfig.base.json",
    "tsconfig.json",
  ]
}

关于这个MonoRepo的使用，在之前的项目中，每次一行代码提交，都会触发所有的lib的eslint校验，导致commit的时候都要花上好久的时间，那么在这种情况下，就是将eslint配置放到更目录下面, 每个lib再extend这个全局配置