📝 О том, как устроено Long Term Caching в webpack 5.
Оно основано на хешировани контента ассета:

webpack.config.js

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[contenthash].js'
  }
};

Будет создан чанк main, а контент его ассета будет пропущен через md4, этим хешем и будет назван выходной файл, что-то вроде dist/6c4c0000f0570789e1e3.js.
То есть имя файла напрямую зависит от его сожержимого. Как только оно изменится, изменится и имя файла. Что является содержимим файла-ассета? По сути это карта модулей, которые входят в чанк и некоторое количество кода-загрузчика.

(() => {
  // bootstrap code
  const modules = {
    ['module 1 id']() {
      // transformed module 1 code
    },
    ['module 2 id']() {
      // transformed module 2 code
    },
    // ... other modules
  }
  // bootstrap code
})()

Проблема в том, что модули могут быть обработаны в любом порядке, поэтому порядок их сборки не гарантируется. Это совсем не то, что нам нужно, т.к. нам важна консистентность содержимого неизменившихся ассетов между сборками и порядок модулей в них. В качестве идентификаторов модулей можно использовать путь к модулю, например:

(() => {
  // bootstrap code
  const modules = {
    '/abs/path/to/project/src/index.js'() {
      // transformed index-module code
    },
    '/abs/path/to/project/src/app.js'() {
      // transformed app-module code
    },
    // ... other modules
  }
  // bootstrap code
})()

Но это сильно раздувает размер ассета, поэтому вместо полного пути к модулю используется хеш-функция от него, которая возвращает целое число.

f('/abs/path/to/project/src/index.js') => 389
f('/abs/path/to/project/src/app.js') => 187

(() => {
  // bootstrap code
  const modules = {
    389() {
      // transformed index-module code
    },
    187() {
      // transformed app-module code
    },
    // ... other modules
  }
  // bootstrap code
})()

Для одного и того же модуля всегда возвращается одно и то же число. А для того, чтобы порядок модулей в ассете был всегда одинаковым, модули сортируются по путям до них.

С идентификаторами чанком то же самое, но т.к. у чанка нет своего пути (т.к. это не модуль), то хеш-функция применяется к объединению путей всех модулей внутри этого чанка.

Таким образом в webpack 5 достигается консистентность сожержимого неизменившихся ассетов между сборками.

Про чанки и прочие основные понятия смотрите предыдущие два поста ☝🏻
Чуть позже расскажу о том, как реализован code-splitting и о системе постоянного кеширования.

Пишите в чатик @wdxlabchat о чем еще хотели бы узнать.

#webpack #webpack5