閱讀(817) 書簽贊(0) 我要糾錯(cuò)

Webpack Cache

2023-05-16 14:39 更新

cache

?boolean object?

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

webpack.config.js

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

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

cache.allowCollectingMemory

收集在反序列化期間分配的未使用的內(nèi)存，僅當(dāng) cache.type 設(shè)置為 'filesystem' 時(shí)生效。這需要將數(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è)針對(duì)構(gòu)建的額外代碼依賴的數(shù)組對(duì)象。webpack 將使用這些項(xiàng)和所有依賴項(xiàng)的哈希值來使文件系統(tǒng)緩存失效。

默認(rèn)是 webpack/lib 來獲取 webpack 的所有依賴項(xiàng)。

webpack.config.js

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

cache.cacheDirectory

?string?

緩存的。默認(rèn)為 node_modules/.cache/webpack。

cache.cacheDirectory 選項(xiàng)僅當(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?

緩存的路徑。默認(rèn)值為 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

對(duì)未改變的模塊進(jìn)行緩存計(jì)算，只引用未改變的模塊。它只能在 cache.type 值為 'memory' 時(shí)使用，除此之外，必須啟用 experiments.cacheUnaffected 配置項(xiàng)。

類型：boolean
v5.54.0+

webpack.config.js

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

cache.compression

?false | 'gzip' | 'brotli'?

5.42.0+

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

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

webpack.config.js

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

cache.hashAlgorithm

?string?

用于哈希生成的算法。詳情請(qǐng)參閱 Node.js crypto。默認(rèn)值為 md4.

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

webpack.config.js

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

cache.idleTimeout

?number = 60000?

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

cache.idleTimeout 配置項(xiàng)僅在 [cache.type] 'filesystem' 時(shí)生效。

webpack.config.js

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

cache.idleTimeoutAfterLargeChanges

?number = 1000?

5.41.0+

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

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

webpack.config.js

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

cache.idleTimeoutForInitialStore

?number = 5000?

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

cache.idleTimeoutForInitialStore 配置項(xiàng)僅在 [cache.type] 'filesystem' 時(shí)生效。

webpack.config.js

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

cache.managedPaths

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

cache.maxAge

?number = 5184000000?

5.30.0+

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

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

webpack.config.js

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

cache.maxGenerations

?number?

5.30.0+

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

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

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

webpack.config.js

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

cache.maxMemoryGenerations $#cachemaxMemorygenerations$

?number?

5.30.0+

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

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

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

webpack.config.js

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

cache.memoryCacheUnaffected

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

類型：?boolean?
v5.54.0+

webpack.config.js

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

cache.name

?string?

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

cache.name 選項(xiàng)僅當(dāng) cache.type 被設(shè)置成 'filesystem' 的時(shí)候可進(jìn)行配置。

webpack.config.js

module.exports = {
  //...
  cache: {
    type: 'filesystem',
    name: 'AppBuildCache',
  },
};

cache.profile

?boolean = false?

跟蹤并記錄各個(gè) 'filesystem' 緩存項(xiàng)的詳細(xì)時(shí)間信息。

webpack.config.js

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

cache.store

?string = 'pack': 'pack'?

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

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

cache.store 選項(xiàng)僅當(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 選項(xiàng)很簡單，它告訴 webpack 在內(nèi)存中存儲(chǔ)緩存，不允許額外的配置：

webpack.config.js

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

cache.version

?string = ''?

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

cache.version 選項(xiàng)僅當(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è)在構(gòu)建之間共享緩存的配置項(xiàng)。
CI 應(yīng)該在相同的絕對(duì)路徑中運(yùn)行任務(wù)。這非常重要，因?yàn)?webpack 緩存文件存儲(chǔ)絕對(duì)路徑。

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:
      # 緩存文件夾
      # 確保在這個(gè)任務(wù)中沒有運(yùn)行 "npm ci" 或者更改默認(rèn)緩存文件夾
      # 否則 "npm ci" 將會(huì)刪除緩存文件
      - 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

以上內(nèi)容是否對(duì)您有幫助：

← Webpack DevServer

Webpack Devtool →

寫筆記

我要補(bǔ)充