缓存

cache

boolean object

缓存生成的 webpack 模块和块以提高构建速度。在 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

对象

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

字符串

缓存的基本目录。默认为 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

字符串

缓存的位置。默认为 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

缓存未更改模块的计算，并且仅引用未更改的模块。它只能与 'memory' 类型的 cache.type 一起使用，此外，必须启用 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

字符串

用于哈希生成的算法。有关更多详细信息，请参阅 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

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

类型：boolean
v5.54.0+

webpack.config.js

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

cache.name

字符串

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

当 cache.type 设置为 'filesystem' 时，cache.name 选项才可用。

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.type 设置为 'filesystem' 时，cache.store 选项才可用。

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.type 设置为 'filesystem' 时，cache.version 选项才可用。

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 操作

- 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

编辑此页面·打印此页面

« 上一页

开发服务器

Devtool

缓存

cache

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 操作

2 位贡献者