React项目Web Worker简单任务正常 RSA密钥生成无响应求助

问题根因 #

• 未配置Worker异常监听：你当前只写了onmessage回调，Worker加载失败、运行时报错都不会触发任何提示，自然会误以为没有被调用
• node-rsa库不兼容浏览器环境：这个库原本是为Node.js开发的，强依赖Node内置的crypto模块，Web Worker中没有对应API，执行时直接抛出异常终止运行
• 4096位RSA生成计算量极大：即使逻辑正常，普通消费级设备生成4096位RSA密钥通常需要3~15秒，无加载提示的场景下很容易被误认为没有执行
• 打包路径适配问题：你使用了{type: 'module'}的ESM类型Worker，React项目常用的Webpack/Vite对Worker路径有特殊解析规则，直接传字符串路径大概率会出现404加载失败

修复步骤 #

1. 先添加异常监听定位问题

先修改调用代码，添加上错误回调，明确报错原因：

useEffect(() => {
    function startGenerationKeys() {
        const worker = new Worker('jobs/KeysPair.js', {type: 'module'});
        // 新增错误监听
        worker.onerror = (error) => {
            console.error('Worker报错：', error.message, error.filename, error.lineno);
        };
        worker.onmessageerror = (error) => {
            console.error('消息解析失败：', error);
        };
        worker.postMessage("start");
        worker.onmessage = function(e) {
            console.log(e.data);
        }
    }
    startGenerationKeys();
}, []);

2. 替换RSA实现为浏览器兼容方案

优先使用浏览器原生Web Crypto API，无第三方依赖、支持硬件加速，性能比node-rsa高5倍以上，Worker代码修改如下：

onmessage = async function(e) {
    // 生成4096位RSA密钥对
    const keyPair = await crypto.subtle.generateKey(
        {
            name: "RSA-OAEP",
            modulusLength: 4096,
            publicExponent: new Uint8Array([1, 0, 1]),
            hash: "SHA-256",
        },
        true,
        ["encrypt", "decrypt"]
    );
    // 导出公钥为PEM格式
    const pubKeyBuffer = await crypto.subtle.exportKey("spki", keyPair.publicKey);
    const pubKey = `-----BEGIN PUBLIC KEY-----\n${btoa(String.fromCharCode(...new Uint8Array(pubKeyBuffer))).match(/.{1,64}/g).join('\n')}\n-----END PUBLIC KEY-----`;
    // 导出私钥为PEM格式
    const privKeyBuffer = await crypto.subtle.exportKey("pkcs8", keyPair.privateKey);
    const privKey = `-----BEGIN PRIVATE KEY-----\n${btoa(String.fromCharCode(...new Uint8Array(privKeyBuffer))).match(/.{1,64}/g).join('\n')}\n-----END PRIVATE KEY-----`;
    
    postMessage({ pubKey: pubKey.replace(/(\r\n|\n|\r)/gm,""), privKey });
};

3. 适配打包工具的Worker导入规则

如果用Vite构建，不要直接传字符串路径创建Worker，修改导入方式：

// 顶部导入
import KeysPairWorker from './jobs/KeysPair.js?worker';

// useEffect内创建实例
const worker = new KeysPairWorker();

如果用Webpack 5+，可以用同样的导入方式，避免打包后路径错误。

4. 优化交互感知

生成4096位密钥期间可以给用户展示加载提示，避免用户认为页面卡住，也可以先把modulusLength改成2048测试逻辑是否通，2048位生成通常只需要1秒内。

内容的提问来源于stack exchange，提问作者tomas