Кэширование

Кэш

boolean object

Кэшировать сгенерированные модули и чанки webpack для ускорения сборки. cache установлено в type: 'memory' в development режиме и отключено в 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/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

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 должен быть включён для его использования.

Тип: 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

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

5.41.0+

Время в миллисекундах. 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

5.30.0+

Количество времени в миллисекундах, которое разрешено для неиспользуемых записей кэша в кэше файловой системы; по умолчанию один месяц.

Опция cache.maxAge доступна только при cache.type установлено в 'filesystem'.

webpack.config.js

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

cache.maxGenerations

number

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

number

5.30.0+

Определите срок хранения неиспользуемых записей кэша в кэше памяти.

cache.maxMemoryGenerations: 0: Постоянный кэш не будет использовать дополнительный кэш памяти. Он будет кэшировать элементы только в памяти до тех пор, пока они не будут сериализованы на диск. После сериализации следующий чтение снова десериализует их с диска. Этот режим минимизирует использование памяти, но вносит затраты на производительность.
cache.maxMemoryGenerations: 1: Это позволит очистить элементы из кэша памяти после их сериализации и неиспользования не менее чем в одной компиляции. При повторном использовании они будут десериализованы с диска. Этот режим минимизирует использование памяти, сохраняя активные элементы в кэше памяти.
cache.maxMemoryGenerations: небольшие числа > 0 будут иметь затраты на производительность для операции GC. Она снижается по мере увеличения числа.
cache.maxMemoryGenerations: по умолчанию устанавливается в 10 в development режиме и в Infinity в production режиме.

Опция cache.maxMemoryGenerations доступна только при cache.type установлено в 'filesystem'.

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

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',
  },
};

Настройка кэша в системе 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

© JS Foundation and other contributors
Licensed under the Creative Commons Attribution License 4.0.
https://webpack.js.org/configuration/cache