快取

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

物件

cache.buildDependencies 是建置所需其他程式碼依賴項陣列的物件。Webpack 會使用每個項目的雜湊和所有依賴項來使檔案系統快取失效。

預設為 webpack/lib 以取得 webpack 的所有依賴項。

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.cacheDirectory 選項僅在 cache.type 設為 'filesystem' 時可用。

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.compression 選項僅在 cache.type 設定為 'filesystem' 時可用。

webpack.config.js

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

cache.hashAlgorithm

字串

用於產生雜湊的演算法。請參閱 Node.js 加密以取得更多詳細資訊。預設為 md4。

cache.hashAlgorithm 選項僅在 cache.type 設定為 'filesystem' 時可用。

webpack.config.js

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

cache.idleTimeout

數字 = 60000

以毫秒為單位的時間。cache.idleTimeout 表示應該發生快取儲存的時間間隔。

cache.idleTimeout 選項僅在 cache.type 設定為 'filesystem' 時可用。

webpack.config.js

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

cache.idleTimeoutAfterLargeChanges

數字 = 1000

5.41.0+

以毫秒為單位的時間。cache.idleTimeoutAfterLargeChanges 是在偵測到較大的變更後，應該發生快取儲存的時間間隔。

cache.idleTimeoutAfterLargeChanges 選項僅在 cache.type 設定為 'filesystem' 時可用。

webpack.config.js

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

cache.idleTimeoutForInitialStore

數字 = 5000

以毫秒為單位。cache.idleTimeoutForInitialStore 是初始快取儲存應發生的時間週期。

cache.idleTimeoutForInitialStore 選項僅在 cache.type 設為 'filesystem' 時可用。

webpack.config.js

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

cache.managedPaths

[字串] = ['./node_modules']

cache.managedPaths 是僅由套件管理員管理的路徑陣列。Webpack 會避免對它們進行雜湊和時間戳記，假設版本是唯一的，並將其用作快照（對於記憶體和檔案系統快取）。

cache.maxAge

數字 = 5184000000

5.30.0+

未使用的快取條目允許留在檔案系統快取中的時間量（以毫秒為單位）；預設為一個月。

cache.maxAge 選項僅在 cache.type 設為 'filesystem' 時可用。

webpack.config.js

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

cache.maxGenerations

數字

5.30.0+

定義記憶體快取中未使用的快取條目的使用壽命。

cache.maxGenerations: 1：未使用的快取條目會在單次編譯後移除。
cache.maxGenerations: Infinity：快取條目會永久保留。

cache.maxGenerations 選項僅在 cache.type 設為 'memory' 時可用。

webpack.config.js

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

cache.maxMemoryGenerations

數字

5.30.0+

定義記憶體快取中未使用的快取條目的使用壽命。

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

快取計算未變更且僅參考記憶體中未變更模組的模組。它只能與 'filesystem' 的 cache.type 一起使用，此外，必須啟用 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.name 選項僅在 cache.type 設為 'filesystem' 時可用。

webpack.config.js

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

cache.profile

布林值 = false

追蹤並記錄 'filesystem' 類型的個別快取項目的詳細計時資訊。

webpack.config.js

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

cache.readonly

布林值 5.85.0

防止 webpack 將快取儲存在檔案系統中。僅在 cache.type === "filesystem" 和 cache.store === 'pack' 時可用。

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

cache.store

字串 = '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

編輯此頁面·列印此頁面

« 上一頁

開發伺服器

開發工具

快取

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 貢獻者