Убедитесь, что пакеты поставщиков кэшируются, сохранив предыдущий хеш

Question

Я пытаюсь использовать splitChunksPlugin , чтобы разделить вендоры и мои сценарии на отдельные пакеты, и похоже, что работает в примере, который они предоставляют . Однако я не думаю, что аспект кэширования работает, так как веб-пакет проекта будет генерировать файлы app-087620f3a62a222ec83e.js и vendors-087620f3a62a222ec83e.js, но при внесении изменений только в мой код генерируются новые хэши для обоих файлов, где я ожидаю, что суффикс хеш-кода поставщика остаться прежним. Выходной объект в моей конфигурации webpack:

output: {
  path: path.resolve(process.cwd(), 'dist'),
  publicPath: '/',
 filename: 'scripts/[name]-[hash].js'
},

Я пытался изменить [hash] на [chunkhash], думая, что это звучит немного более разумно, основываясь на руководстве кеширования документа , но веб-пакет завершается с ошибкой:

ERROR in chunk bundleUnAuth [entry] scripts/[chunkhash].js Cannot use [chunkhash] or [contenthash] for chunk in 'scripts/[chunkhash].js' (use [hash] instead)

Замена commonsChunkPlugin не означает, что для него требуется что-то вроде NamedModulesPlugin или HashedModuleIdsPlugin, поскольку его предшественник указывает, что он делает для нюансов, в которых может произойти то же самое.

Как я могу убедиться, что плагин chunking сохраняет тот же хеш для неизмененного файла вендора, одновременно обновляя хеш для скриптов, которыми я управляю, которые изменились?

Answer 1

Во-первых, вы должны использовать поле runtimechunk вместе с splitChunksPlugin.

Например:

  runtimeChunk: {
    name: 'manifest',
  },
  splitChunks: {
    cacheGroups: {
      commons: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendor',
        chunks: 'all',
      },
    },
  },

путем настройки runtimeChunk будет создан новый блок с именем manifest. Этот транк содержит время выполнения веб-пакета и manifest. manifest - это часть, которая меняется каждый раз, когда вы меняете свой код. Извлекая его в отдельный чанк, хеш хобота ваших поставщиков останется неизменным между сборками.

Для производственной сборки также рекомендуется HashedModuleIdsPlugin или NamedModulesPlugin. Поскольку они могут сохранять идентификаторы модулей ваших вендорных модулей, остаются неизменными при переименовании / перемещении кодов приложения.