boolean
object
缓存生成的 webpack 模块和 chunk,来改善构建速度。cache
会在开发
模式被设置成 type: 'memory'
而且在 生产
模式 中被禁用。 cache: true
与 cache: { type: 'memory' }
配置作用一致。 传入 false
会禁用缓存:
webpack.config.js
module.exports = {
//...
cache: false,
};
当将 cache.type
设置为 'filesystem'
是会开放更多的可配置项。
收集在反序列化期间分配的未使用的内存,仅当 cache.type
设置为 'filesystem'
时生效。这需要将数据复制到更小的缓冲区中,并有性能成本。
boolean
false
in production mode and true
in development mode.webpack.config.js
module.exports = {
cache: {
type: 'filesystem',
allowCollectingMemory: true,
},
};
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 是构建依赖。
},
},
};
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'),
},
};
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.type
值为 'memory'
时使用,除此之外,必须启用 experiments.cacheUnaffected
配置项。
boolean
webpack.config.js
module.exports = {
//...
cache: {
type: 'memory',
cacheUnaffected: true,
},
};
false | 'gzip' | 'brotli'
用于缓存文件的压缩类型。development
模式下默认为 false
,production
模式下默认为 'gzip'
。
cache.compression
配置项仅在 cache.type
设为 'filesystem'
时可用。
webpack.config.js
module.exports = {
//...
cache: {
type: 'filesystem',
compression: 'gzip',
},
};
string
用于哈希生成的算法。详情请参阅 Node.js crypto。默认值为 md4
.
cache.hashAlgorithm
选项仅当 cache.type
设置成 'filesystem'
才可配置。
webpack.config.js
module.exports = {
//...
cache: {
type: 'filesystem',
hashAlgorithm: 'md4',
},
};
number = 60000
时间以毫秒为单位。cache.idleTimeout
表示缓存存储发生的时间间隔。
cache.idleTimeout
配置项仅在 [cache.type
] 'filesystem'
时生效。
webpack.config.js
module.exports = {
//..
cache: {
type: 'filesystem',
idleTimeout: 60000,
},
};
number = 1000
以毫秒为单位。cache.idleTimeoutAfterLargeChanges
是当检测到较大的更改时,缓存存储应在此之后发生的时间段。
cache.idleTimeoutAfterLargeChanges
仅在 cache.type
设为 'filesystem'
时可用。
webpack.config.js
module.exports = {
//..
cache: {
type: 'filesystem',
idleTimeoutAfterLargeChanges: 1000,
},
};
number = 5000
单位毫秒。 cache.idleTimeoutForInitialStore
是在初始缓存存储发生后的时间段。
cache.idleTimeoutForInitialStore
配置项仅在 [cache.type
] 'filesystem'
时生效。
webpack.config.js
module.exports = {
//..
cache: {
type: 'filesystem',
idleTimeoutForInitialStore: 0,
},
};
[string] = ['./node_modules']
cache.managedPaths
是仅托管路径的包管理器数组。webpack 将避免将他们进行哈希和时间戳处理,假设版本是唯一的,并将其用作快照(用于内存和文件系统缓存)。
number = 5184000000
允许未使用的缓存留在文件系统缓存中的时间(以毫秒为单位);默认为一个月。
cache.maxAge
仅在 cache.type
设置为 'filesystem'
时生效。
webpack.config.js
module.exports = {
// ...
cache: {
type: 'filesystem',
maxAge: 5184000000,
},
};
number
定义内存缓存中未使用的缓存项的生命周期。
cache.maxGenerations: 1
: 在一次编译中未使用的缓存被删除。
cache.maxGenerations: Infinity
: 缓存将永远保存。
cache.maxGenerations
配置项仅在 cache.type
设置为 'memory'
时有效。
webpack.config.js
module.exports = {
// ...
cache: {
type: 'memory',
maxGenerations: Infinity,
},
};
number
定义内存缓存中未使用的缓存项的生命周期。
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.type
值为 'filesystem'
时使用,除此之外,必须启用 experiments.cacheUnaffected
配置项。
boolean
webpack.config.js
module.exports = {
//...
cache: {
type: 'filesystem',
memoryCacheUnaffected: true,
},
};
string
缓存的名称。不同的名字会导致不同的的共存的缓存。默认值为 ${config.name}-${config.mode}
。使用 cache.name
当你有多份配置的时候,是比较合理的因为会有配置会有独立的缓存。
cache.name
选项仅当 cache.type
被设置成 'filesystem'
的时候可进行配置。
webpack.config.js
module.exports = {
//...
cache: {
type: 'filesystem',
name: 'AppBuildCache',
},
};
boolean = false
跟踪并记录各个 'filesystem'
缓存项的详细时间信息。
webpack.config.js
module.exports = {
//...
cache: {
type: 'filesystem',
profile: true,
},
};
string = 'pack': 'pack'
cache.store
告诉 webpack 什么时候将数据存放在文件系统中。
'pack'
: 当编译器闲置时候,将缓存数据都存放在一个文件中cache.store
选项仅当 cache.type
设置成 'filesystem'
才可配置。
webpack.config.js
module.exports = {
//...
cache: {
type: 'filesystem',
store: 'pack',
},
};
string: 'memory' | 'filesystem'
将 cache
类型设置为内存或者文件系统。memory
选项很简单,它告诉 webpack 在内存中存储缓存,不允许额外的配置:
webpack.config.js
module.exports = {
//...
cache: {
type: 'memory',
},
};
string = ''
缓存数据的版本。不同版本不会允许重用缓存和重载当前的内容。当配置以一种无法重用缓存的方式改变时,要更新缓存的版本。这会让缓存失效。
cache.version
选项仅当 cache.type
设置成 'filesystem'
才可配置。
webpack.config.js
module.exports = {
//...
cache: {
type: 'filesystem',
version: 'your_version',
},
};
文件系统缓存允许在 CI 的构建之间共享缓存。为了设置设置缓存:
以下是一些通用配置
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/
- uses: actions/cache@v3
with:
# 缓存文件夹
path: node_modules/.cache/webpack/
key: ${{ GITHUB_REF_NAME }}-webpack-build
# 兜底使用 "main" 分支缓存
restore-keys: |
main-webpack-build
Webpack 5 现已正式发布。请阅读我们的 发布公告。如还未准备升级,请阅读 webpack 4 文档。