使用 webworker 的 Webpack 警告：运行时块之间的循环依赖

Question

我在一个项目中使用 Webpack 5，只是尝试将一些逻辑移至 WebWorker 中。这是我创建工人的方式：

persistenceWorker = new Worker(
  new URL('app/engine/persistence/worker', import.meta.url),
);

但是，我现在收到了来自 webpack 的警告：

Circular dependency between chunks with runtime (main, src_app_engine_index_ts)
This prevents using hashes of each other and should be avoided.

这似乎是因为我的工作程序文件导入了传递导入正在创建工作程序的文件的代码。我认为这在我的程序架构中是无法避免的。不过，我不明白这是一个问题 - 没有任何内容导入工作模块，因此引用都应该朝一个方向发展。看起来它正在将创建工作程序作为依赖项计算在内，即使创建工作程序的文件实际上并未导入工作程序文件中的代码。

有没有办法来解决这个问题？重构我的项目以消除“循环依赖”可能是行不通的。

这个警告有多大问题？如果我关闭警告，一切都会正常，而且我不清楚“这可以防止使用彼此的哈希值”在实际中意味着什么。

Answer 1

通常，webpack 会捆绑使用以下格式命名的文件[name].[contenthash].js，例如捆绑“index”可能是index.e64fc3.js. 这样做是为了确保前端的新部署不会使用从应用程序的早期版本缓存的客户端 js。有关内容哈希的更多详细信息，请参阅此文档： https: //webpack.js.org/guides/caching/

此错误通知您，您的两个循环依赖项无法使用捆绑包文件名中包含的内容哈希来命名。这是因为每个文件的内容哈希现在取决于另一个文件的内容哈希（循环依赖 webpack 无法解析）。

此举的影响值得怀疑。一方面，您的应用程序将有效。尤其是本地。但是，在部署时，您现在面临着无法使工作程序和工作程序创建包的客户端缓存失效的风险。而且由于它们可能不会以相同的到期时间进行缓存，因此您甚至可能会遇到生产场景，其中工作程序代码和调用者代码之间存在版本不匹配（哎呀）。

您可以通过在捆绑输出中使用不依赖于内容的盐来避免这种情况。也许是版本字符串或发布日期？这不太好看到，因为每个版本都会使两个捆绑包无效，即使它们不包含任何更改，但它会减轻警告和潜在的副作用。

看看webpack 的内置文件名模板字符串，它看起来并不满足上述解决方案。您可以使用以下方法自行推出：

// webpack.config.js

module.exports = {
  // ...
  output: {
    filename: (pathData) =>
        `${pathData.chunk.name}.${process.env.npm_package_version}.js`;
  },
};

请注意，process.env.npm_package_version由npm run（请参阅https://docs.npmjs.com/cli/v9/using-npm/scripts#packagejson-vars）填充