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('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가 활성화되어 있어야 사용할 수 있습니다.

• 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-build