Webpack Cache

cache

?boolean object?

緩存生成的 webpack 模塊和 chunk，來改善構(gòu)建速度。cache 會在開發(fā) 模式被設(shè)置成 type: 'memory' 而且在 生產(chǎn) 模式 中被禁用。 cache: true 與 cache: { type: 'memory' } 配置作用一致。 傳入 false 會禁用緩存:

webpack.config.js

module.exports = {
  //...
  cache: false,
};

當(dāng)將 cache.type 設(shè)置為 'filesystem' 是會開放更多的可配置項。

cache.allowCollectingMemory

收集在反序列化期間分配的未使用的內(nèi)存，僅當(dāng) cache.type 設(shè)置為 'filesystem' 時生效。這需要將數(shù)據(jù)復(fù)制到更小的緩沖區(qū)中，并有性能成本。

• Type: booleanIt defaults to false in production mode and true in development mode.
• 5.35.0+

webpack.config.js

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

cache.buildDependencies

?object?

cache.buildDependencies 是一個針對構(gòu)建的額外代碼依賴的數(shù)組對象。webpack 將使用這些項和所有依賴項的哈希值來使文件系統(tǒng)緩存失效。

默認是 webpack/lib 來獲取 webpack 的所有依賴項。

webpack.config.js

module.exports = {
  cache: {
    buildDependencies: {
      // This makes all dependencies of this file - build dependencies
      config: [__filename],
      // 默認情況下 webpack 與 loader 是構(gòu)建依賴。
    },
  },
};

cache.cacheDirectory

?string?

緩存的。默認為 node_modules/.cache/webpack。

cache.cacheDirectory 選項僅當(dāng) cache.type 被設(shè)置成 '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 配置項。

• 類型：boolean
• v5.54.0+

webpack.config.js

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

cache.compression

?false | 'gzip' | 'brotli'?

5.42.0+

用于緩存文件的壓縮類型。development 模式下默認為 false，production 模式下默認為 'gzip'。

cache.compression 配置項僅在 cache.type 設(shè)為 'filesystem' 時可用。

webpack.config.js

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

cache.hashAlgorithm

?string?

用于哈希生成的算法。詳情請參閱 Node.js crypto。默認值為 md4.

cache.hashAlgorithm 選項僅當(dāng) cache.type 設(shè)置成 'filesystem' 才可配置。

webpack.config.js

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

cache.idleTimeout

?number = 60000?

時間以毫秒為單位。cache.idleTimeout 表示緩存存儲發(fā)生的時間間隔。

cache.idleTimeout 配置項僅在 [cache.type] 'filesystem' 時生效。

webpack.config.js

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

cache.idleTimeoutAfterLargeChanges

?number = 1000?

5.41.0+

以毫秒為單位。cache.idleTimeoutAfterLargeChanges 是當(dāng)檢測到較大的更改時，緩存存儲應(yīng)在此之后發(fā)生的時間段。

cache.idleTimeoutAfterLargeChanges 僅在 cache.type 設(shè)為 'filesystem' 時可用。

webpack.config.js

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

cache.idleTimeoutForInitialStore

?number = 5000?

單位毫秒。 cache.idleTimeoutForInitialStore 是在初始緩存存儲發(fā)生后的時間段。

cache.idleTimeoutForInitialStore 配置項僅在 [cache.type] 'filesystem' 時生效。

webpack.config.js

module.exports = {
  //..
  cache: {
    type: 'filesystem',
    idleTimeoutForInitialStore: 0,
  },
};

cache.managedPaths

?[string] = ['./node_modules']?

cache.maxAge

?number = 5184000000?

5.30.0+

允許未使用的緩存留在文件系統(tǒng)緩存中的時間（以毫秒為單位）；默認為一個月。

cache.maxAge 僅在 cache.type 設(shè)置為 'filesystem' 時生效。

webpack.config.js

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

cache.maxGenerations

?number?

5.30.0+

定義內(nèi)存緩存中未使用的緩存項的生命周期。

• cache.maxGenerations: 1: 在一次編譯中未使用的緩存被刪除。
• cache.maxGenerations: Infinity: 緩存將永遠保存。

cache.maxGenerations 配置項僅在 cache.type 設(shè)置為 'memory' 時有效。

webpack.config.js

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

cache.maxMemoryGenerations $#cachemaxMemorygenerations$

?number?

5.30.0+

定義內(nèi)存緩存中未使用的緩存項的生命周期。

• cache.maxMemoryGenerations: 0: 持久化緩存不會使用額外的內(nèi)存緩存。它只將項目緩存到內(nèi)存中，直到它們被序列化到磁盤。一旦序列化，下一次讀取將再次從磁盤反序列化它們。這種模式將最小化內(nèi)存使用，但會帶來性能成本。
• cache.maxMemoryGenerations: 1: 這將從內(nèi)存緩存中清除已序列化且在至少一次編譯中未使用的項。當(dāng)再次使用它們時，它們將從磁盤反序列化。這種模式將最小化內(nèi)存使用量，同時仍將活動項保留在內(nèi)存緩存中。
• cache.maxMemoryGenerations: 大于 0 的小數(shù)字將為 GC 操作帶來性能成本。它會隨著數(shù)字的增加而降低。
• cache.maxMemoryGenerations: development 模式下默認為 10，production 模式下默認為 Infinity。

cache.maxMemoryGenerations 配置項僅在 cache.type 設(shè)置為 'filesystem' 時有效。

webpack.config.js

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

cache.memoryCacheUnaffected

對未改變的模塊進行緩存計算，并且只引用內(nèi)存中未改變的模塊。它只能在 cache.type 值為 'filesystem' 時使用，除此之外，必須啟用 experiments.cacheUnaffected 配置項。

• 類型：?boolean?
• v5.54.0+

webpack.config.js

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

cache.name

?string?

緩存的名稱。不同的名字會導(dǎo)致不同的的共存的緩存。默認值為 ${config.name}-${config.mode}。使用 cache.name 當(dāng)你有多份配置的時候，是比較合理的因為會有配置會有獨立的緩存。

cache.name 選項僅當(dāng) cache.type 被設(shè)置成 '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.store

?string = 'pack': 'pack'?

cache.store 告訴 webpack 什么時候?qū)?shù)據(jù)存放在文件系統(tǒng)中。

• 'pack': 當(dāng)編譯器閑置時候，將緩存數(shù)據(jù)都存放在一個文件中

cache.store 選項僅當(dāng) cache.type 設(shè)置成 'filesystem' 才可配置。

webpack.config.js

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

cache.type

?string: 'memory' | 'filesystem'?

將 cache 類型設(shè)置為內(nèi)存或者文件系統(tǒng)。memory 選項很簡單，它告訴 webpack 在內(nèi)存中存儲緩存，不允許額外的配置：

webpack.config.js

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

cache.version

?string = ''?

緩存數(shù)據(jù)的版本。不同版本不會允許重用緩存和重載當(dāng)前的內(nèi)容。當(dāng)配置以一種無法重用緩存的方式改變時，要更新緩存的版本。這會讓緩存失效。

cache.version 選項僅當(dāng) cache.type 設(shè)置成 'filesystem' 才可配置。

webpack.config.js

module.exports = {
  //...
  cache: {
    type: 'filesystem',
    version: 'your_version',
  },
};

在 CI/CD 系統(tǒng)中設(shè)置緩存

文件系統(tǒng)緩存允許在 CI 的構(gòu)建之間共享緩存。為了設(shè)置設(shè)置緩存：

• CI 應(yīng)該有一個在構(gòu)建之間共享緩存的配置項。
• CI 應(yīng)該在相同的絕對路徑中運行任務(wù)。這非常重要，因為 webpack 緩存文件存儲絕對路徑。

GitLab CI/CD

以下是一些通用配置

variables:
  # 兜底使用 "main" 分支緩存，要求 GitLab Runner 版本為 13.4
  CACHE_FALLBACK_KEY: main

# 這是 webpack 構(gòu)建任務(wù)
build-job:
  cache:
    key: '$CI_COMMIT_REF_SLUG' # 分支/tag 名稱
    paths:
      # 緩存文件夾
      # 確保在這個任務(wù)中沒有運行 "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