Webpack Cache

cache

​boolean object​

缓存生成的 webpack 模块和 chunk，来改善构建速度。cache 会在开发 模式被设置成 type: 'memory' 而且在 生产 模式 中被禁用。 cache: true 与 cache: { type: 'memory' } 配置作用一致。 传入 false 会禁用缓存:

webpack.config.js

module.exports = {
  //...
  cache: false,
};

当将 cache.type 设置为 'filesystem' 是会开放更多的可配置项。

cache.allowCollectingMemory

收集在反序列化期间分配的未使用的内存，仅当 cache.type 设置为 'filesystem' 时生效。这需要将数据复制到更小的缓冲区中，并有性能成本。

• Type: booleanIt defaults to false in production mode and true in development mode.
• 5.35.0+

webpack.config.js

module.exports = {
  cache: {
    type: 'filesystem',
    allowCollectingMemory: true,
  },
};

cache.buildDependencies

​object​

cache.buildDependencies 是一个针对构建的额外代码依赖的数组对象。webpack 将使用这些项和所有依赖项的哈希值来使文件系统缓存失效。

默认是 webpack/lib 来获取 webpack 的所有依赖项。

webpack.config.js

module.exports = {
  cache: {
    buildDependencies: {
      // This makes all dependencies of this file - build dependencies
      config: [__filename],
      // 默认情况下 webpack 与 loader 是构建依赖。
    },
  },
};

cache.cacheDirectory

​string​

缓存的。默认为 node_modules/.cache/webpack。

cache.cacheDirectory 选项仅当 cache.type 被设置成 'filesystem' 才可用。

webpack.config.js

const path = require('path');

module.exports = {
  //...
  cache: {
    type: 'filesystem',
    cacheDirectory: path.resolve(__dirname, '.temp_cache'),
  },
};

cache.cacheLocation

​string​

缓存的路径。默认值为 path.resolve(cache.cacheDirectory, cache.name).

webpack.config.js

const path = require('path');

module.exports = {
  //...
  cache: {
    type: 'filesystem',
    cacheLocation: path.resolve(__dirname, '.test_cache'),
  },
};

cache.cacheUnaffected

对未改变的模块进行缓存计算，只引用未改变的模块。它只能在 cache.type 值为 'memory' 时使用，除此之外，必须启用 experiments.cacheUnaffected 配置项。

• 类型：boolean
• v5.54.0+

webpack.config.js

module.exports = {
  //...
  cache: {
    type: 'memory',
    cacheUnaffected: true,
  },
};

cache.compression

​false | 'gzip' | 'brotli'​

5.42.0+

用于缓存文件的压缩类型。development 模式下默认为 false，production 模式下默认为 'gzip'。

cache.compression 配置项仅在 cache.type 设为 'filesystem' 时可用。

webpack.config.js

module.exports = {
  //...
  cache: {
    type: 'filesystem',
    compression: 'gzip',
  },
};

cache.hashAlgorithm

​string​

用于哈希生成的算法。详情请参阅 Node.js crypto。默认值为 md4.

cache.hashAlgorithm 选项仅当 cache.type 设置成 'filesystem' 才可配置。

webpack.config.js

module.exports = {
  //...
  cache: {
    type: 'filesystem',
    hashAlgorithm: 'md4',
  },
};

cache.idleTimeout

​number = 60000​

时间以毫秒为单位。cache.idleTimeout 表示缓存存储发生的时间间隔。

cache.idleTimeout 配置项仅在 [cache.type] 'filesystem' 时生效。

webpack.config.js

module.exports = {
  //..
  cache: {
    type: 'filesystem',
    idleTimeout: 60000,
  },
};

cache.idleTimeoutAfterLargeChanges

​number = 1000​

5.41.0+

以毫秒为单位。cache.idleTimeoutAfterLargeChanges 是当检测到较大的更改时，缓存存储应在此之后发生的时间段。

cache.idleTimeoutAfterLargeChanges 仅在 cache.type 设为 'filesystem' 时可用。

webpack.config.js

module.exports = {
  //..
  cache: {
    type: 'filesystem',
    idleTimeoutAfterLargeChanges: 1000,
  },
};

cache.idleTimeoutForInitialStore

​number = 5000​

单位毫秒。 cache.idleTimeoutForInitialStore 是在初始缓存存储发生后的时间段。

cache.idleTimeoutForInitialStore 配置项仅在 [cache.type] 'filesystem' 时生效。

webpack.config.js

module.exports = {
  //..
  cache: {
    type: 'filesystem',
    idleTimeoutForInitialStore: 0,
  },
};

cache.managedPaths

​[string] = ['./node_modules']​

cache.maxAge

​number = 5184000000​

5.30.0+

允许未使用的缓存留在文件系统缓存中的时间（以毫秒为单位）；默认为一个月。

cache.maxAge 仅在 cache.type 设置为 'filesystem' 时生效。

webpack.config.js

module.exports = {
  // ...
  cache: {
    type: 'filesystem',
    maxAge: 5184000000,
  },
};

cache.maxGenerations

​number​

5.30.0+

定义内存缓存中未使用的缓存项的生命周期。

• cache.maxGenerations: 1: 在一次编译中未使用的缓存被删除。
• cache.maxGenerations: Infinity: 缓存将永远保存。

cache.maxGenerations 配置项仅在 cache.type 设置为 'memory' 时有效。

webpack.config.js

module.exports = {
  // ...
  cache: {
    type: 'memory',
    maxGenerations: Infinity,
  },
};

cache.maxMemoryGenerations $#cachemaxMemorygenerations$

​number​

5.30.0+

定义内存缓存中未使用的缓存项的生命周期。

• cache.maxMemoryGenerations: 0: 持久化缓存不会使用额外的内存缓存。它只将项目缓存到内存中，直到它们被序列化到磁盘。一旦序列化，下一次读取将再次从磁盘反序列化它们。这种模式将最小化内存使用，但会带来性能成本。
• cache.maxMemoryGenerations: 1: 这将从内存缓存中清除已序列化且在至少一次编译中未使用的项。当再次使用它们时，它们将从磁盘反序列化。这种模式将最小化内存使用量，同时仍将活动项保留在内存缓存中。
• cache.maxMemoryGenerations: 大于 0 的小数字将为 GC 操作带来性能成本。它会随着数字的增加而降低。
• cache.maxMemoryGenerations: development 模式下默认为 10，production 模式下默认为 Infinity。

cache.maxMemoryGenerations 配置项仅在 cache.type 设置为 'filesystem' 时有效。

webpack.config.js

module.exports = {
  // ...
  cache: {
    type: 'filesystem',
    maxMemoryGenerations: Infinity,
  },
};

cache.memoryCacheUnaffected

对未改变的模块进行缓存计算，并且只引用内存中未改变的模块。它只能在 cache.type 值为 'filesystem' 时使用，除此之外，必须启用 experiments.cacheUnaffected 配置项。

• 类型：​boolean​
• v5.54.0+

webpack.config.js

module.exports = {
  //...
  cache: {
    type: 'filesystem',
    memoryCacheUnaffected: true,
  },
};

cache.name

​string​

缓存的名称。不同的名字会导致不同的的共存的缓存。默认值为 ${config.name}-${config.mode}。使用 cache.name 当你有多份配置的时候，是比较合理的因为会有配置会有独立的缓存。

cache.name 选项仅当 cache.type 被设置成 'filesystem' 的时候可进行配置。

webpack.config.js

module.exports = {
  //...
  cache: {
    type: 'filesystem',
    name: 'AppBuildCache',
  },
};

cache.profile

​boolean = false​

跟踪并记录各个 'filesystem' 缓存项的详细时间信息。

webpack.config.js

module.exports = {
  //...
  cache: {
    type: 'filesystem',
    profile: true,
  },
};

cache.store

​string = 'pack': 'pack'​

cache.store 告诉 webpack 什么时候将数据存放在文件系统中。

• 'pack': 当编译器闲置时候，将缓存数据都存放在一个文件中

cache.store 选项仅当 cache.type 设置成 'filesystem' 才可配置。

webpack.config.js

module.exports = {
  //...
  cache: {
    type: 'filesystem',
    store: 'pack',
  },
};

cache.type

​string: 'memory' | 'filesystem'​

将 cache 类型设置为内存或者文件系统。memory 选项很简单，它告诉 webpack 在内存中存储缓存，不允许额外的配置：

webpack.config.js

module.exports = {
  //...
  cache: {
    type: 'memory',
  },
};

cache.version

​string = ''​

缓存数据的版本。不同版本不会允许重用缓存和重载当前的内容。当配置以一种无法重用缓存的方式改变时，要更新缓存的版本。这会让缓存失效。

cache.version 选项仅当 cache.type 设置成 'filesystem' 才可配置。

webpack.config.js

module.exports = {
  //...
  cache: {
    type: 'filesystem',
    version: 'your_version',
  },
};

在 CI/CD 系统中设置缓存

文件系统缓存允许在 CI 的构建之间共享缓存。为了设置设置缓存：

• CI 应该有一个在构建之间共享缓存的配置项。
• CI 应该在相同的绝对路径中运行任务。这非常重要，因为 webpack 缓存文件存储绝对路径。

GitLab CI/CD

以下是一些通用配置

variables:
  # 兜底使用 "main" 分支缓存，要求 GitLab Runner 版本为 13.4
  CACHE_FALLBACK_KEY: main

# 这是 webpack 构建任务
build-job:
  cache:
    key: '$CI_COMMIT_REF_SLUG' # 分支/tag 名称
    paths:
      # 缓存文件夹
      # 确保在这个任务中没有运行 "npm ci" 或者更改默认缓存文件夹
      # 否则 "npm ci" 将会删除缓存文件
      - node_modules/.cache/webpack/

Github actions

- uses: actions/cache@v3
  with:
    # 缓存文件夹
    path: node_modules/.cache/webpack/
    key: ${{ GITHUB_REF_NAME }}-webpack-build
    # 兜底使用 "main" 分支缓存
    restore-keys: |
      main-webpack-build