Cache
cache
boolean object
생성된 webpack 모듈 및 청크를 캐시하여 빌드 속도를 개선하세요. cache는 development 모드에서 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의 모든 디펜던시를 얻기 위해 기본값은 webpack/lib입니다.
webpack.config.js
module.exports = {
cache: {
buildDependencies: {
// 이 파일의 모든 디펜던시를 만듭니다(빌드 디펜던시).
config: [__filename],
// 기본적으로 webpack과 로더는 빌드 디펜던시에 포함됩니다.
},
},
};cache.cacheDirectory
string
캐시의 기본 디렉터리입니다. 기본값은 node_modules/.cache/webpack 입니다.
cache.cacheDirectory는 cache.type이 'filesystem'으로 설정되어 있을 경우만 사용 가능합니다.
webpack.config.js
const path = require("node: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("node:path");
module.exports = {
// ...
cache: {
type: "filesystem",
cacheLocation: path.resolve(__dirname, ".test_cache"),
},
};cache.cacheUnaffected
변경되지 않은 모듈의 캐시를 계산하고 변경되지 않은 모듈만 참조합니다. 이는 cache.type이 'memory'로 설정된 경우에만 사용할 수 있으며, experiments.cacheUnaffected가 활성화되어 있어야 사용할 수 있습니다.
- Type:
boolean - v5.54.0+
webpack.config.js
module.exports = {
// ...
cache: {
type: "memory",
cacheUnaffected: true,
},
};cache.compression
false | 'gzip' | 'brotli'
캐시 파일에 사용되는 압축 유형입니다. 기본적으로 이 값은 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
밀리 초 단위의 시간입니다. 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
사용되지 않은 캐시 항목이 파일 시스템 캐시에 머무를 수 있는 밀리 초 단위의 시간입니다. 기본값은 1개월입니다.
cache.maxAge는 cache.type이 'filesystem'으로 설정된 경우에만 사용할 수 있습니다.
webpack.config.js
module.exports = {
// ...
cache: {
type: "filesystem",
maxAge: 5184000000,
},
};cache.maxGenerations
number
메모리 캐시에서 사용되지 않는 캐시 항목의 수명을 정의합니다.
-
cache.maxGenerations: 1: 컴파일 시 사용되지 않은 캐시는 제거됩니다. -
cache.maxGenerations: Infinity: 캐시는 영원히 유지됩니다.
cache.maxGenerations은 cache.type이 'memory'로 설정된 경우에만 사용할 수 있습니다.
webpack.config.js
module.exports = {
// ...
cache: {
type: "memory",
maxGenerations: Infinity,
},
};cache.maxMemoryGenerations
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.memoryCacheUnaffected
변경되지 않은 모듈의 캐시를 계산하고 변경되지 않은 모듈만 참조합니다. 이는 cache.type이 'filesystem'으로 설정된 경우에만 사용할 수 있으며, experiments.cacheUnaffected가 활성화되어 있어야 사용할 수 있습니다.
- Type:
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",
},
};Setup cache in CI/CD system
파일 시스템 캐시를 사용하면 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" # 브랜치/태그 이름
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-build2 Contributors
