キャッシュ

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
- productionモードではデフォルトでfalse、developmentモードではtrueです。
5.35.0+

webpack.config.js

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

cache.buildDependencies

オブジェクト

cache.buildDependenciesは、ビルドの追加のコード依存関係の配列のオブジェクトです。Webpackはこれらの各アイテムとすべての依存関係のハッシュを使用して、ファイルシステムキャッシュを無効にします。

Webpackのすべての依存関係を取得するために、デフォルトはwebpack/libです。

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.typeが'filesystem'に設定されている場合にのみ、cache.cacheDirectoryオプションを使用できます。

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

変更されていないモジュールのみを参照する変更されていないモジュールの計算をキャッシュします。cache.typeが'memory'の場合にのみ使用でき、さらに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.typeが'filesystem'に設定されている場合にのみ、cache.compressionオプションを使用できます。

webpack.config.js

module.exports = {
  //...
  cache: {
    type: 'filesystem',
    compression: 'gzip',
  },
};

cache.hashAlgorithm

文字列

ハッシュ生成に使用されるアルゴリズム。詳細については、Node.js cryptoを参照してください。デフォルトはmd4です。

cache.typeが'filesystem'に設定されている場合にのみ、cache.hashAlgorithmオプションを使用できます。

webpack.config.js

module.exports = {
  //...
  cache: {
    type: 'filesystem',
    hashAlgorithm: 'md4',
  },
};

cache.idleTimeout

number = 60000

ミリ秒単位の時間。cache.idleTimeoutは、キャッシュの保存が行われるまでの時間間隔を示します。

cache.typeが'filesystem'に設定されている場合にのみ、cache.idleTimeoutオプションを使用できます。

webpack.config.js

module.exports = {
  //..
  cache: {
    type: 'filesystem',
    idleTimeout: 60000,
  },
};

cache.idleTimeoutAfterLargeChanges

number = 1000

5.41.0+

ミリ秒単位の時間。cache.idleTimeoutAfterLargeChangesは、大きな変更が検出された後にキャッシュの保存が行われるまでの時間間隔です。

cache.typeが'filesystem'に設定されている場合にのみ、cache.idleTimeoutAfterLargeChangesオプションを使用できます。

webpack.config.js

module.exports = {
  //..
  cache: {
    type: 'filesystem',
    idleTimeoutAfterLargeChanges: 1000,
  },
};

cache.idleTimeoutForInitialStore

number = 5000

ミリ秒単位の時間。cache.idleTimeoutForInitialStoreは、最初のキャッシュの保存が行われるまでの時間間隔です。

cache.typeが'filesystem'に設定されている場合にのみ、cache.idleTimeoutForInitialStoreオプションを使用できます。

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+

未使用のキャッシュエントリがファイルシステムキャッシュに残される許容時間（ミリ秒単位）。デフォルトは1ヶ月です。

cache.typeが'filesystem'に設定されている場合にのみ、cache.maxAgeオプションを使用できます。

webpack.config.js

module.exports = {
  // ...
  cache: {
    type: 'filesystem',
    maxAge: 5184000000,
  },
};

cache.maxGenerations

number

5.30.0+

メモリキャッシュ内の未使用のキャッシュエントリの有効期間を定義します。

cache.maxGenerations: 1: キャッシュエントリは、未使用になった後、1回のコンパイルで削除されます。
cache.maxGenerations: Infinity: キャッシュエントリは永久に保持されます。

cache.typeが'memory'に設定されている場合にのみ、cache.maxGenerationsオプションを使用できます。

webpack.config.js

module.exports = {
  // ...
  cache: {
    type: 'memory',
    maxGenerations: Infinity,
  },
};

cache.maxMemoryGenerations

number

5.30.0+

メモリキャッシュ内の未使用のキャッシュエントリの有効期間を定義します。

cache.maxMemoryGenerations: 0: 永続的なキャッシュは、追加のメモリキャッシュを使用しません。ディスクにシリアル化されるまで、アイテムはメモリにのみキャッシュされます。シリアル化されると、次の読み取りではディスクから再度逆シリアル化されます。このモードではメモリ使用量が最小限に抑えられますが、パフォーマンスコストが発生します。
cache.maxMemoryGenerations: 1: これは、アイテムがシリアル化され、少なくとも1回のコンパイルで未使用になった場合に、メモリキャッシュからアイテムをパージします。再度使用されると、ディスクから逆シリアル化されます。このモードでは、メモリ使用量が最小限に抑えられ、アクティブなアイテムはメモリキャッシュに保持されます。
cache.maxMemoryGenerations: 0より大きい小さな数は、GC操作のパフォーマンスコストになります。数値が増加するにつれて低くなります。
cache.maxMemoryGenerations: developmentモードではデフォルトで10、productionモードではInfinityです。

cache.typeが'filesystem'に設定されている場合にのみ、cache.maxMemoryGenerationsオプションを使用できます。

webpack.config.js

module.exports = {
  // ...
  cache: {
    type: 'filesystem',
    maxMemoryGenerations: Infinity,
  },
};

cache.memoryCacheUnaffected

変更されていないモジュールのみを参照する変更されていないモジュールのメモリ内の計算をキャッシュします。cache.typeが'filesystem'の場合にのみ使用でき、さらに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.store オプションは、cache.type が 'filesystem' に設定されている場合のみ使用できます。

webpack.config.js

module.exports = {
  //...
  cache: {
    type: 'filesystem',
    store: 'pack',
  },
};

cache.type

文字列: 'memory' | 'filesystem'

cache のタイプをメモリ内またはファイルシステムのいずれかに設定します。memory オプションはシンプルで、Webpack にメモリ内にキャッシュを保存するように指示し、追加の設定は許可しません。

webpack.config.js

module.exports = {
  //...
  cache: {
    type: 'memory',
  },
};

cache.version

文字列 = ''

キャッシュデータのバージョンです。異なるバージョンではキャッシュの再利用は許可されず、既存のコンテンツを上書きします。キャッシュの再利用ができないような方法で設定が変更された場合は、バージョンを更新してください。これにより、キャッシュが無効になります。

cache.version オプションは、cache.type が 'filesystem' に設定されている場合のみ使用できます。

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 Actions

- 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

このページを編集·このページを印刷

« 前へ

DevServer

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 Actions

2 貢献者