能否将单个函数委托给WebWorker运行而无需大幅重构现有代码？

完全可以只将单个重计算函数隔离到Web Worker中运行，且不需要大量重构现有代码，具体实现方案如下：

• 不用创建独立的Worker脚本文件，通过Blob内联生成Worker代码即可，完全不改动现有项目的文件结构
• 对外保留原有类的接口形态，仅需将veryHeavyCalculations改为异步方法，调用方仅需增加await关键字即可适配，改动量极小
• 针对对象引用传递问题，Web Worker本身不支持直接传递非序列化对象，但可通过指令代理的方式实现：在主线程维护对象映射池，Worker仅传递对象ID和操作指令，主线程执行对应操作后将可序列化的结果回传给Worker即可

实现代码示例 #

class MySimplifiedFacade{
    constructor(){
        // 初始化时创建内联Worker，复用实例避免重复创建开销
        this.worker = this._createInlineWorker();
        // 维护请求ID映射，避免多次调用竞态
        this.requestMap = new Map();
        this.requestId = 0;

        // 统一监听Worker返回结果
        this.worker.onmessage = (e) => {
            const {requestId, result} = e.data;
            if(this.requestMap.has(requestId)){
                this.requestMap.get(requestId)(result);
                this.requestMap.delete(requestId);
            }
        }
    }

    _createInlineWorker(){
        // Worker运行逻辑直接写在字符串中
        const workerRuntime = `
            // 引入依赖的第三方库，若库已打包到项目中也可直接将库代码粘贴到此处
            importScripts('你的第三方库加载地址');
            
            self.onmessage = (e) => {
                const {requestId, params} = e.data;
                // 执行重计算逻辑
                const calcResult = someExternalLibrary.heavySynchronousCalculation(params);
                // 回传结果
                self.postMessage({requestId, result: calcResult});
            }
        `;
        const blob = new Blob([workerRuntime], {type: 'application/javascript'});
        return new Worker(URL.createObjectURL(blob));
    }

    someLightMethod(params){
        // 轻量方法完全不用修改，保持原有逻辑
    }

    // 对外接口参数保持不变，仅改为异步返回
    async veryHeavyCalculations(params){
        const currentRequestId = this.requestId++;
        return new Promise((resolve) => {
            this.requestMap.set(currentRequestId, resolve);
            this.worker.postMessage({
                requestId: currentRequestId,
                params: params
            });
        })
    }

    // 可选：页面销毁时调用释放Worker资源
    destroy(){
        this.worker.terminate();
        URL.revokeObjectURL(this.worker.src);
    }
}

注意事项 #

• 需提前确认你使用的第三方计算库是否支持Web Worker环境：若库依赖window、document等仅主线程存在的API，则无法直接在Worker中运行，可改用时间切片的方式拆分计算任务避免阻塞UI
• 结构化克隆算法默认支持绝大多数普通数据类型的传递：包括普通对象、数组、Date、Map、Set、ArrayBuffer等，只有函数、DOM节点、含循环引用的对象等特殊类型无法直接传递，这类场景按前述的指令代理方式处理即可

内容的提问来源于stack exchange，提问作者i.brod