我正在使用 create-react-app
和 typescript
进行项目开发。
我想启用 WebWorker
来执行一些耗费性能的任务,但目前还没有找到任何启用它的解决方案。
我查看了一些库:
你有什么想法吗?
提前感谢!
我正在使用 create-react-app
和 typescript
进行项目开发。
我想启用 WebWorker
来执行一些耗费性能的任务,但目前还没有找到任何启用它的解决方案。
我查看了一些库:
你有什么想法吗?
提前感谢!
我最终使用了 [worker-loader]。它工作得还不错。
https://github.com/webpack-contrib/worker-loader#integrating-with-typescript
要与 TypeScript 集成,您需要为 worker 的 exports 定义一个自定义模块。
// typings/custom.d.ts
declare module "worker-loader!*" {
class WebpackWorker extends Worker {
constructor();
}
export default WebpackWorker;
}
// Worker.ts
const ctx: Worker = self as any;
// Post data to parent thread
ctx.postMessage({ foo: "foo" });
// Respond to message from parent thread
ctx.addEventListener("message", (event) => console.log(event));
// App.ts
import Worker from "worker-loader!./Worker";
const worker = new Worker();
worker.postMessage({ a: 1 });
worker.onmessage = (event) => {};
worker.addEventListener("message", (event) => {});
针对最新的React Scripts(v5+)和Webpack 5的答案:
worker-loader模块在Webpack 5中不起作用。
const w = new Worker(new URL('path/to/your/worker.ts', import.meta.url));
w.postMessage('hello world');
请查看Webpack文档。