Umi.js 项目中使用 Web Worker

1.配置 Umi.js

在 Umi.js 中，需要通过配置来扩展 Webpack 的功能。在项目根目录下修改 config/config.ts 文件：

export default defineConfig({chainWebpack(config) {config.module.rule('worker').test(/\.worker\.ts$/).use('worker-loader').loader('worker-loader').end();}
});

配置之后 worker.ts 文件将被 worker-loader 加载。
将 Worker 需要的依赖添加到 MFSU 的 exclude 配置中是因为 Module Federation 是通过 window 对象来共享模块的，所以在 worker 中不能使用 Module Federation 中的模块。

2.创建一个 Web Worker 文件

创建worker.ts 文件，编写 Web Worker 逻辑：

// src/utils/worker.ts
self.onmessage = function(e: MessageEvent) {console.log('Worker: Message received from main script');const result: number = e.data[0] * e.data[1];if (isNaN(result)) {self.postMessage('Please write two numbers');} else {console.log('Worker: Posting message back to main script');self.postMessage(result);}
};

3.在 React 组件中使用 Web Worker

在 React 组件中引入并使用 Web Worker：

import React, { useEffect, useState } from 'react';const WorkerDemo: React.FC = () => {const [workerResult, setWorkerResult] = useState(0);useEffect(() => {const worker = new Worker(new URL('@/utils/worker.ts', import.meta.url));// Message posted to workerworker.postMessage([2, 3]);// Message received from workerworker.onmessage = function (e: MessageEvent) {setWorkerResult(e.data);}return () => {worker.terminate(); // 组件卸载时终止 Web Worker}}, []);return (<div><h1>Web Worker Example</h1><p>Result from Worker: {workerResult}</p></div>)
};export default WorkerDemo;