模块网络工作者解决方法

module web worker workaround

我正在开发一个 JavaScript 应用程序,它将在客户端(在浏览器内)进行一些计算。然而,后来发现计算相当昂贵,并且 运行 在主线程中使用它们会阻塞 UI。所以我决定 运行 它们在 web worker 中。

由于计算逻辑已经写在 JavaScript 模块中并与 webpack 捆绑在一起(确切地说,它们是作为 React 应用程序一部分的打字稿模块),最自然的方法是使用 worker类型 module。但是,与 2022 年一样,旧版浏览器不支持此功能,特别是 Firefox 不支持它。这使我无法使用此功能。

只有 classic worker,我能想到的唯一解决方案是将所有这些模块(及其依赖项)复制到一个 js 文件中,这将是可维护性的噩梦。有什么方法可以解决这个问题(例如,以编程方式生成这个单个 js 文件,而不会弄乱现有代码)?特别是,由于我使用的是 webpack,我考虑过为 worker 创建一个包含所有模块代码的单独包。但我对 webpack 还不够熟悉,无法尝试。

WebPack 版本 5 提供 worker support 开箱即用。

包含 worker-loader 以在 Webpack 版本 4 中获得类似的功能相对容易。

但是,如果目标是与网络工作者进行对话(即传递参数、获取结果),那么可能值得将 Google 的 comlink or even integrating the comlink-loader 纳入您的 webpack配置。

Comlink makes WebWorkers enjoyable. Comlink is a tiny library (1.1kB), that removes the mental barrier of thinking about postMessage and hides the fact that you are working with workers.