如何通过WebWorker解压zip文件

背景

        随着时间的推移，我们开发项目的复杂性逐渐增加。用户对于这些应用的期望也随之上升，他们渴望更高的性能，更快的响应速度，以及更流畅的体验。然而，随着前端项目的不断演进，我们开始面临一些挑战。主线程负载逐渐加重，导致应用在处理大量计算或复杂任务时变得缓慢，有时甚至出现了明显的卡顿。因此，我们需要一种方法，能够允许我们在后台运行一些任务，而不会干扰主线程的工作。

        Web Worker做为一个强大的工具，可以在浏览器中创建独立的后台线程，这些线程可以并行运行，而不会阻塞主线程。这对于处理计算密集型任务来说，就像是前端应用的一次魔法。

 什么是Web Worker

        Web Worker 是一项 HTML5 技术，允许我们在浏览器中创建独立的后台线程，这些线程可以并行运行，不会阻塞主线程。这意味着我们可以将一些需要大量计算的任务从主线程中分离出来，以提高前端项目的性能和响应速度。

 Web Worker 主要分为两种类型：Dedicated Worker 和 Shared Worker。

• Dedicated Worker：每个 Dedicated Worker 都与创建它的脚本线程相关联，它们之间是一对一的关系。这意味着每个 Dedicated Worker 只能被一个脚本使用。

• Shared Worker：Shared Worker 可以被多个脚本线程共享，因此可以用于多个页面或标签之间的通信。

为什么需要 WebWorker 解压 ZIP 文件

在传统前端解压方案中（如直接使用 JSZip），所有操作都在主线程执行，会导致：

• UI 线程阻塞：大文件解压时页面卡死

• 内存限制：浏览器主线程内存受限，大文件容易造成崩溃

• 用户体验差：无法执行其他操作，甚至出现"页面无响应"提示

WebWorker 将解压任务放到后台线程，实现：

• 非阻塞：主线程保持流畅，可显示进度条

• 大文件支持：可利用更多系统资源

• 真正的多线程：充分利用现代多核 CPU

实现方式：（基于 JSZip + WebWorker）

/**
     * 在 Web Worker 中解压 ZIP 文件
     */
    const unzipInWorker = (blob: Blob): Promise<Record<string, string>> => {
        return new Promise((resolve, reject) => {
            const workerCode = `
                importScripts('https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js ');
                
                self.onmessage = async function(e) {
                    try {
                        const startTime = performance.now();//性能统计，记录计算解压耗时
                        const blob = e.data;//从主线程获取 ZIP 文件的 Blob 对象
                        
                        const zip = new JSZip();//创建 JSZip 实例
                        const zipData = await zip.loadAsync(blob, { createFolders: false });// 异步解析 ZIP 文件
                        
                        const extractedFiles = {};
                        const fileEntries = Object.entries(zipData.files);
                        const fileList = fileEntries.filter(([, file]) => !file.dir);//提取文件列表
                        
                        /** 分批处理机制*/
                        const batchSize = 10;
                        let processedCount = 0;
                        
                        for (let i = 0; i < fileList.length; i += batchSize) {
                            const batch = fileList.slice(i, i + batchSize);
                            
                            const batchResults = await Promise.all(
                                batch.map(async ([fileName, file]) => {
                                    const content = await file.async('string');
                                    return { fileName, content };
                                })
                            );
                            
                            batchResults.forEach(({ fileName, content }) => {
                                extractedFiles[fileName] = content;
                            });
                            //进度计算与实时反馈
                            processedCount += batch.length;
                            const progress = Math.min(100, Math.floor((processedCount / fileList.length) * 100));
                            self.postMessage({ 
                                type: 'progress', 
                                progress,
                                current: processedCount,
                                total: fileList.length
                            });
                        }
                        
                        const endTime = performance.now();//记录解压完成时间点
                        self.postMessage({ 
                            type: 'complete',
                            success: true, 
                            files: extractedFiles,
                            time: endTime - startTime
                        });
                    } catch (error) {
                        self.postMessage({ 
                            type: 'complete',
                            success: false, 
                            error: error.message 
                        });
                    }
                };
            `;

            const workerBlob = new Blob([workerCode], { type: 'application/javascript' });
            const workerUrl = URL.createObjectURL(workerBlob);
            const worker = new Worker(workerUrl);

            worker.onmessage = (e) => {
                if (e.data.type === 'progress') {
                    unzipProgress.value = parseInt(e.data.progress, 10);
                    unzipProgressText.value = `${e.data.current}/${e.data.total} 文件`;
                } else if (e.data.type === 'complete') {
                    URL.revokeObjectURL(workerUrl);
                    worker.terminate();

                    if (e.data.success) {
                        unzipProgress.value = 100;
                        unzipProgressStatus.value = 'success';
                        unzipProgressText.value = `解压完成 (${e.data.time.toFixed(0)}ms)`;
                        resolve(e.data.files);
                    } else {
                        unzipProgressStatus.value = 'exception';
                        unzipProgressText.value = `解压失败: ${e.data.error}`;
                        reject(new Error(e.data.error));
                    }
                }
            };

            worker.onerror = (error) => {
                URL.revokeObjectURL(workerUrl);
                worker.terminate();
                reject(error);
            };

            worker.postMessage(blob);
        });
    };

实现步骤：

1. 用 Promise 封装 Worker 的异步操作，让调用方可以用 async/await 方式使用

2. 动态创建 Worker ：不依赖外部文件，直接在内存中创建 Worker

        const workerCode = `
            importScripts('https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js ');

3.分批处理机制:批次大小：每 10 个文件处理一批，平衡并发与内存

                    const batchSize = 10;
                    let processedCount = 0;

核心设计亮点总结

1. 动态 Worker：无需单独文件，适合现代构建工具和微前端

2. 分批处理：避免内存峰值，处理大 ZIP 更稳定

3. 进度反馈：实时感知解压状态，提升用户体验

4. 自动清理：完善的资源释放机制，防止内存泄漏

5. Promise 封装：让异步操作像同步一样优雅调用