缓存配置

webpackjsorg-main配置参考

cache

boolean object

缓存生成的 webpack 模块和 chunk，以提高构建速度。cache: true 是 cache: { type: 'memory' } 的别名。传入 false 可禁用缓存：

cache 的默认值取决于 mode：

模式	默认值
`"production"`	`false`
`"development"`	`{ type: 'memory' }`
`"none"`	`false`

webpack.config.js

js 复制代码

export default {
  // ...
  cache: false,
};

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

cache.allowCollectingMemory

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

类型：boolean

cache.allowCollectingMemory 的默认值取决于 mode：

模式	默认值
`"production"`	`false`
`"development"`	`true`
`"none"`	`false`

webpack.config.js

js 复制代码

export default {
  cache: {
    type: "filesystem",
    allowCollectingMemory: true,
  },
};

cache.buildDependencies

object

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

默认值为 webpack/lib，用于获取 webpack 的所有依赖。

T> 建议在 webpack 配置中设置 cache.buildDependencies.config: [__filename]，以获取最新的配置及其所有依赖。

webpack.config.js

js 复制代码

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);

export default {
  cache: {
    buildDependencies: {
      // 这使得此文件的所有依赖成为构建依赖
      config: [__filename],
      // 默认情况下，webpack 和 loader 是构建依赖
    },
  },
};

cache.cacheDirectory

string

缓存的基础目录。默认为 node_modules/.cache/webpack。

cache.cacheDirectory 选项仅在 cache.type 设置为 'filesystem' 时可用。

webpack.config.js

js 复制代码

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  // ...
  cache: {
    type: "filesystem",
    cacheDirectory: path.resolve(__dirname, ".temp_cache"),
  },
};

W> 缓存的最终位置是 cache.cacheDirectory + cache.name 的组合。

cache.cacheLocation

string

缓存的位置。默认为 path.resolve(cache.cacheDirectory, cache.name)。

webpack.config.js

js 复制代码

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  // ...
  cache: {
    type: "filesystem",
    cacheLocation: path.resolve(__dirname, ".test_cache"),
  },
};

cache.cacheUnaffected

缓存那些未更改且仅引用未更改模块的模块的计算结果。它只能与 'memory' 类型的 cache.type 一起使用，此外，必须启用 experiments.cacheUnaffected 才能使用。

类型：boolean
v5.54.0+

webpack.config.js

js 复制代码

export default {
  // ...
  cache: {
    type: "memory",
    cacheUnaffected: true,
  },
};

cache.compression

false | 'gzip' | 'brotli' | 'zstd'

缓存文件使用的压缩类型。默认是 false。

T> 'zstd'（Zstandard）自 webpack 5.109.0 起可用，需要 Node.js >= 22.15.0，该版本内置了 node:zlib zstd 绑定。

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

webpack.config.js

js 复制代码

export default {
  // ...
  cache: {
    type: "filesystem",
    compression: "gzip",
  },
};

cache.hashAlgorithm

string

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

cache.hashAlgorithm 选项仅在 cache.type 设置为 'filesystem' 时可用。

webpack.config.js

js 复制代码

export default {
  // ...
  cache: {
    type: "filesystem",
    hashAlgorithm: "md4",
  },
};

cache.idleTimeout

number = 60000

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

cache.idleTimeout 选项仅在 cache.type 设置为 'filesystem' 时可用。

webpack.config.js

js 复制代码

export default {
  // ..
  cache: {
    type: "filesystem",
    idleTimeout: 60000,
  },
};

cache.idleTimeoutAfterLargeChanges

number = 1000

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

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

webpack.config.js

js 复制代码

export default {
  // ..
  cache: {
    type: "filesystem",
    idleTimeoutAfterLargeChanges: 1000,
  },
};

cache.idleTimeoutForInitialStore

number = 5000

以毫秒为单位的时间。cache.idleTimeoutForInitialStore 是初始缓存存储应该发生的时间段。

cache.idleTimeoutForInitialStore 选项仅在 cache.type 设置为 'filesystem' 时可用。

webpack.config.js

js 复制代码

export default {
  // ..
  cache: {
    type: "filesystem",
    idleTimeoutForInitialStore: 0,
  },
};

cache.managedPaths

[string] = ['./node_modules']

W> 已移至 snapshot.managedPaths

cache.managedPaths 是仅由包管理器管理的路径数组。webpack 将避免对它们进行哈希和时间戳处理，假定版本是唯一的，并将其用作快照（用于内存和文件系统缓存）。

cache.maxAge

number = 5184000000

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

cache.maxAge 选项仅在 cache.type 设置为 'filesystem' 时可用。

webpack.config.js

js 复制代码

export default {
  // ...
  cache: {
    type: "filesystem",
    maxAge: 5184000000,
  },
};

cache.maxGenerations

number

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

cache.maxGenerations: 1：缓存条目在单次编译中未使用后将被移除。
cache.maxGenerations: Infinity：缓存条目将永久保留。

cache.maxGenerations 选项仅在 cache.type 设置为 'memory' 时可用。

webpack.config.js

js 复制代码

export default {
  // ...
  cache: {
    type: "memory",
    maxGenerations: Infinity,
  },
};

cache.maxMemoryGenerations

number

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

cache.maxMemoryGenerations: 0：持久化缓存将不使用额外的内存缓存。它只会将条目缓存在内存中，直到它们被序列化到磁盘。一旦序列化，下一次读取将再次从磁盘反序列化它们。此模式将最小化内存使用，但会带来性能开销。
cache.maxMemoryGenerations: 1：一旦条目被序列化并且至少在一次编译中未使用，将从内存缓存中清除它们。当它们再次被使用时，将从磁盘反序列化。此模式将最小化内存使用，同时将活跃条目保留在内存缓存中。
cache.maxMemoryGenerations：大于 0 的小数值会给 GC 操作带来性能开销。随着数值的增加，开销会降低。

cache.maxMemoryGenerations 的默认值取决于 mode：

模式	默认值
`"production"`	`Infinity`
`"development"`	`5`
`"none"`	`Infinity`

webpack.config.js

js 复制代码

export default {
  // ...
  cache: {
    type: "filesystem",
    maxMemoryGenerations: Infinity,
  },
};

cache.memoryCacheUnaffected

在内存中缓存那些未更改且仅引用未更改模块的模块的计算结果。它只能与 'filesystem' 类型的 cache.type 一起使用，此外，必须启用 experiments.cacheUnaffected 才能使用。

类型：boolean
v5.54.0+

webpack.config.js

js 复制代码

export default {
  // ...
  cache: {
    type: "filesystem",
    memoryCacheUnaffected: true,
  },
};

cache.name

string

缓存的名称。不同的名称将导致不同的共存缓存。默认为 ${config.name}-${config.mode}。当有多个应该具有独立缓存的配置时，使用 cache.name 是有意义的。

cache.name 选项仅在 cache.type 设置为 'filesystem' 时可用。

webpack.config.js

js 复制代码

export default {
  // ...
  cache: {
    type: "filesystem",
    name: "AppBuildCache",
  },
};

cache.profile

boolean = false

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

webpack.config.js

js 复制代码

export default {
  // ...
  cache: {
    type: "filesystem",
    profile: true,
  },
};

cache.readonly

boolean

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

js 复制代码

export default {
  // ...
  cache: {
    type: "filesystem",
    store: "pack",
    readonly: true,
  },
};

cache.store

string = 'pack': 'pack'

cache.store 告诉 webpack 何时将数据存储到文件系统。

'pack'：当编译器空闲时，将所有缓存项的数据存储到一个文件中

cache.store 选项仅在 cache.type 设置为 'filesystem' 时可用。

W> 自 webpack 5.0.x 起，pack 是唯一支持的模式。

webpack.config.js

js 复制代码

export default {
  // ...
  cache: {
    type: "filesystem",
    store: "pack",
  },
};

cache.type

string: 'memory' | 'filesystem'

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

webpack.config.js

js 复制代码

export default {
  // ...
  cache: {
    type: "memory",
  },
};

cache.version

string = ''

缓存数据的版本。不同的版本不允许重用缓存，并且会覆盖现有内容。当配置发生不允许重用缓存的更改时，请更新版本。这将使缓存失效。

cache.version 选项仅在 cache.type 设置为 'filesystem' 时可用。

webpack.config.js

js 复制代码

export default {
  // ...
  cache: {
    type: "filesystem",
    version: "your_version",
  },
};

W> 不要在具有不同选项的调用之间共享缓存。

在 CI/CD 系统中设置缓存

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

CI 应具有在构建之间共享缓存的选项。
CI 应在相同的绝对路径下运行作业。这一点很重要，因为 webpack 缓存文件存储了绝对路径。

GitLab CI/CD

常见的配置可能如下：

yaml 复制代码

variables:
  # 回退到使用 "main" 分支缓存，需要 GitLab Runner 13.4
  CACHE_FALLBACK_KEY: main

# 这是 webpack 构建作业
build-job:
  cache:
    key: "$CI_COMMIT_REF_SLUG" # 分支/标签名称
    paths:
      # 缓存目录
      # 确保你不要在此作业中运行 "npm ci" 或更改默认缓存目录
      # 否则 "npm ci" 将清理缓存文件
      - node_modules/.cache/webpack/

Github actions

yaml 复制代码

- uses: actions/cache@v3
  with:
    # 缓存目录
    path: node_modules/.cache/webpack/
    key: ${{ GITHUB_REF_NAME }}-webpack-build
    # 回退到使用 "main" 分支缓存
    restore-keys: |
      main-webpack-build

帮助我们改进文档

发现翻译问题或内容错误？请告诉我们。