webpack - 如何使用 webpack 5 处理 SharedWorker 代码升级？

Question

Webpack 5 支持为 Workers 或 SharedWorkers 构建单独的入口点，只需将以下代码添加到文件中： new SharedWorker(new URL('./worker.js', import.meta.url));

Webpack 为这个 worker 生成一个单独的块：123.s0m3ha2h.esm.js 我相信它的名字包含它的内容的哈希值。

当一个 SharedWorker 被实例化时，浏览器会检查是否已经有一个具有相同 URL 的，如果没有，则启动一个新的 ShraredWorker。

我想避免在代码更新后同时运行 2 个版本的 SharedWorker。将 SharedWorkers 与 webpack 一起使用时如何实现这一点？

Answer 1

可以为工作人员使用 webpack 魔术注释：

new SharedWorker(new URL('./worker.ts', import.meta.url) /* webpackChunkName: 'shared-worker.js' */);

这应该为 SharedWorker 提供一个稳定不变的文件名，以便只运行一个实例。

只要任何选项卡连接到最初加载的 SharedWorker 版本，它就会继续运行，并且来自较新包的代码将连接到较旧的 SharedWorker。