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;
import.meta 是一個內置在 ES 模塊內部的對象，import.meta.url 表示一個模塊在瀏覽器和 Node.js
的絕對路徑。
new URL傳入 path & base 寫入內存
使用 Web Worker，可以在后臺線程中執行耗時的操作，而不會阻塞主線程，從而提升應用的響應速度。
