Javascript 通过保留以前的散列，确保缓存供应商捆绑包

我正试图使用将供应商DEP和我的脚本分离到单独的包中，它似乎正在使用。然而，我不认为缓存方面是作为网页包工作的，该项目将生成

app-087620f3a62a2ec83e.js

和

vendors-087620f3a62a2ec83e.js

文件，但在仅对我的代码进行更改时，会为这两个文件生成新的哈希，我希望供应商的哈希后缀保持不变。我的网页包配置中的输出对象是：

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

我曾尝试将

[hash]

更改为

[chunkhash]

，从文档的角度来看，这听起来有点合理，但webpack失败了，出现了以下错误：

chunk bundleuth[entry]scripts/[chunkhash]中出现错误。js无法对“scripts/[chunkhash].js”中的chunk使用[chunkhash]或[contenthash]（改为使用[hash]）

替换

CommonChunkPlugin

并不意味着它需要类似于

NamedModulesPlugin

或

HashedModuleIdsPlugin

的东西来处理可能发生同样情况的细微情况

如何确保分块插件在更新我控制的已更改脚本的哈希值时，为未更改的供应商文件保留相同的哈希值？首先，应将字段与splitChunksPlugin一起使用

例如：

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

通过配置

runtimeChunk

，将创建一个名为

manifest

的新块。此主干包含网页包运行时和

清单

。

清单是每次更改代码时都会更改的部分。通过将其提取到一个单独的块，您的供应商主干的散列在构建之间将保持不变

对于生产构建，还建议使用
HashedModuleIdsPlugin
或
NamedModulesPlugin
。因为它们可以在您重命名/移动应用程序代码时保持供应商模块的模块ID不变。
事实上，我确实尝试过使用该选项，但在眼睛开始变得沉重之前，仅通过了
true
选项。指示
清单
是选项的文档在哪里？我在链接中丢失了它。字符串
manifest
没有任何特殊含义。你可以把它换成你喜欢的任何东西。我使用
manifest
只是为了惯例。相关的代码非常简单，我明白了。它只是一个不包含在条目中的字符串，就像来自CommonChunkPlugin一样。明白了。还有一个问题，你知道
是什么意思吗？这可能会导致包含所有外部包的大块。建议只包含核心框架和实用程序，并动态加载其余依赖项。
从链接的文档中加载。例如，在应用程序中，您可以使用qrcode.react在对话框中呈现qrcode。通过将测试规则设置为
/[\\/]node\u modules[\\/]/
，则
node\u modules
下的所有模块都是捆绑到清单区块的。这意味着即使用户不打开对话框，qrcode.react也会在每次用户查看您的页面时加载。为了优化这一点，我们只能在
manifest
中包含核心框架（如react-dom-react-router等），并根据需要加载qrcode.react模块。请确保它不会加载
node\u模块中的所有内容
只加载
import
ed或
require
d的模块，这些模块位于入口点导入树的某个位置。