缓存

boolean object

缓存生成的 webpack 模块和 chunk 以提高构建速度。在`development`（开发）模式下，`cache` 被设置为 `type: 'memory'`，在`production`（生产）模式下则被禁用。`cache: true` 是 `cache: { type: 'memory' }` 的别名。要禁用缓存，请传递 `false`。

webpack.config.js

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

将 `cache.type` 设置为 `'filesystem'` 会开启更多配置选项。

cache.allowCollectingMemory

收集反序列化过程中分配的未使用内存，仅当 `cache.type` 设置为 `'filesystem'` 时可用。这需要将数据复制到较小的缓冲区中，会带来性能开销。

类型：boolean
- 在生产模式下默认为 `false`，在开发模式下默认为 `true`。
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],
      // By default webpack and loaders are build dependencies
    },
  },
};

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+

用于缓存文件的压缩类型。默认为 `false`。

`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.managedPaths` 是一个仅由包管理器管理的路径数组。Webpack 将避免对其进行哈希和时间戳处理，假定版本是唯一的，并将其用作快照（用于内存和文件系统缓存）。

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

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.readonly

boolean 5.85.0

阻止 webpack 将缓存存储到文件系统。仅当 `cache.type === "filesystem"` 和 `cache.store === 'pack'` 时可用。

module.exports = {
  //...
  cache: {
    type: 'filesystem',
    store: 'pack',
    readonly: 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:
  # fallback to use "main" branch cache, requires GitLab Runner 13.4
  CACHE_FALLBACK_KEY: main

# this is webpack build job
build-job:
  cache:
    key: '$CI_COMMIT_REF_SLUG' # branch/tag name
    paths:
      # cache directory
      # make sure that you don't run "npm ci" in this job or change default cache directory
      # otherwise "npm ci" will prune cache files
      - node_modules/.cache/webpack/

Github actions

- uses: actions/cache@v3
  with:
    # cache directory
    path: node_modules/.cache/webpack/
    key: ${{ GITHUB_REF_NAME }}-webpack-build
    # fallback to use "main" branch cache
    restore-keys: |
      main-webpack-build

编辑本页·打印本页

« 上一页

DevServer

Devtool

缓存

缓存

cache.allowCollectingMemory

cache.buildDependencies

cache.cacheDirectory

cache.cacheLocation

cache.cacheUnaffected

cache.compression

cache.hashAlgorithm

cache.idleTimeout

cache.idleTimeoutAfterLargeChanges

cache.idleTimeoutForInitialStore

cache.managedPaths

cache.maxAge

cache.maxGenerations

cache.maxMemoryGenerations

cache.memoryCacheUnaffected

cache.name

cache.profile

cache.readonly

cache.store

cache.type

cache.version

在 CI/CD 系统中设置缓存

GitLab CI/CD

Github actions

2 贡献者