快捷導(dǎo)航

前端進行ZIP處理的方法實現(xiàn)與對比(JSZipvsfflate)

更新時間：2025年09月03日 15:57:46 作者：Null155

在前端開發(fā)中,處理 ZIP 壓縮文件的需求日益增多,無論是??優(yōu)化資源加載速度??還是實現(xiàn)??文件批量上傳/下載??,本文將為大家介紹兩種不同方法,希望對大家有所幫助

1. 引言：前端為何要處理 ZIP

在前端開發(fā)中，處理 ZIP 壓縮文件的需求日益增多。無論是??優(yōu)化資源加載速度??、??減少帶寬消耗??，還是實現(xiàn)??文件批量上傳/下載??，ZIP 壓縮技術(shù)都能發(fā)揮重要作用。通過壓縮，我們可以將多個文件合并為一個，減少 HTTP 請求次數(shù)，并顯著減小傳輸文件的大小，從而提升用戶體驗。

2. 庫的選擇：JSZip 與 fflate 全方位對比

2.1 JSZip：功能全面的老牌選擇

JSZip 是一個成熟的 JavaScript 庫，用于創(chuàng)建、讀取和編輯 ZIP 文件，支持瀏覽器和 Node.js 環(huán)境。

核心優(yōu)勢：??

??API 簡單直觀??：zip.files 直接列出文件，file.async("string") 獲取內(nèi)容，開發(fā)體驗良好。
??功能全面??：不僅支持解壓，還能創(chuàng)建 ZIP、添加文件、生成多種格式輸出（Blob、Base64 等）。
??文檔豐富??：社區(qū)活躍，教程和示例眾多，上手容易。
??兼容性強??：作為老牌庫，兼容性經(jīng)過廣泛驗證。

主要局限：??

??性能相對較差??：純 JavaScript 實現(xiàn)的壓縮算法，處理大文件時可能引起界面卡頓。
??內(nèi)存開銷較大??：需要將整個壓縮包加載到內(nèi)存中處理，不適合處理超大文件。
??不支持流式處理??：必須等待整個文件解壓完成才能訪問內(nèi)容。

2.2 fflate：極致性能的現(xiàn)代選擇

fflate 是一個快速、輕量級且純 JavaScript 實現(xiàn)的壓縮庫，專注于高性能的壓縮和解壓縮操作。

核心優(yōu)勢：??

??速度極快且輕量??：底層采用 TypedArray 優(yōu)化，性能遠(yuǎn)超 JSZip，庫體積僅幾 KB。
??同步 API??：unzipSync 可立即返回結(jié)果，處理小文件幾乎無延遲。
??支持流式處理??：可以邊解壓邊處理，適合大文件場景，避免阻塞 UI。
??低內(nèi)存占用??：高效的內(nèi)存管理機制。

主要局限：??

??API 相對底層??：返回 { [filename]: Uint8Array }，需自行轉(zhuǎn)換數(shù)據(jù)格式（如使用 TextDecoder）。
??功能專注??：主要專注于壓縮和解壓縮，不像 JSZip 提供豐富的 ZIP 文件操作功能。
??文檔和生態(tài)相對較少??：較新的庫，社區(qū)資源和示例相對較少。

2.3 綜合對比表格

特性	JSZip	fflate
??API 易用性??	? 高階，開箱即用	? 相對底層，需自行處理數(shù)據(jù)
??功能豐富度??	? 創(chuàng)建、讀取、編輯 ZIP	?? 專注壓縮/解壓
??性能表現(xiàn)??	? 較慢，純 JS 實現(xiàn)	? 極快，TypedArray 優(yōu)化
??內(nèi)存效率??	? 全文件加載內(nèi)存	? 高效，支持流式
??社區(qū)生態(tài)??	? 文檔豐富，示例多	? 相對較新，資源少
??體積??	? 相對較大	? 極輕量（幾 KB）
??適用場景??	常規(guī) ZIP 操作、快速開發(fā)	高性能需求、大文件處理

3. 實戰(zhàn)代碼：解壓與壓縮

3.1 使用 JSZip 解壓 ZIP 文件

JSZip 的異步 API 和直觀的文件訪問方式使其解壓過程非常清晰。

import JSZip from 'jszip';

const jszip = new JSZip();

async function decompressWithJSZip(file: File) {
    // 加載ZIP文件
    const zip = await jszip.loadAsync(file);

    // 遍歷ZIP內(nèi)所有文件
    for (const [relativePath, fileEntry] of Object.entries(zip.files)) {
        try {
            // 處理JSON文件
            if (relativePath.endsWith(".json")) {
                const jsonText = await fileEntry.async("string");
                const jsonData = JSON.parse(jsonText);
                console.log("[JSZip] JSON 文件:", relativePath, jsonData);
            } 
            // 處理XML文件
            else if (relativePath.endsWith(".xml")) {
                const xmlText = await fileEntry.async("string");
                console.log("[JSZip] XML 文件:", relativePath, xmlText);
            }
            // 可以繼續(xù)添加其他文件類型的處理邏輯
        } catch (err) {
            console.error(`[JSZip] 解析失敗: ${relativePath}`, err);
        }
    }
}

3.2 使用 fflate 解壓 ZIP 文件

fflate 的同步 API 和底層控制提供了更高的性能，但需要更多的手動處理。

import { unzipSync, strFromU8 } from 'fflate';

async function decompressWithFFlate(file: File) {
    // 將File對象轉(zhuǎn)換為ArrayBuffer，然后轉(zhuǎn)為Uint8Array
    const arrayBuffer = await file.arrayBuffer();
    const files = unzipSync(new Uint8Array(arrayBuffer));

    // 遍歷解壓后的文件
    for (const [path, fileEntry] of Object.entries(files)) {
        try {
            // 處理JSON文件
            if (path.endsWith(".json")) {
                const jsonText = strFromU8(fileEntry); // 將Uint8Array轉(zhuǎn)換為字符串
                const jsonData = JSON.parse(jsonText);
                console.log("[FFlate] JSON 文件:", path, jsonData);
            } 
            // 處理XML文件
            else if (path.endsWith(".xml")) {
                const xmlText = strFromU8(fileEntry);
                console.log("[FFlate] XML 文件:", path, xmlText);
            }
        } catch (err) {
            console.error(`[FFlate] 解析失敗: ${path}`, err);
        }
    }
}

3.3 使用 JSZip 創(chuàng)建 ZIP 文件

JSZip 提供了簡單的接口來創(chuàng)建包含多個文件的 ZIP 壓縮包。

import JSZip from 'jszip';

const jszip = new JSZip();

async function compressWithJSZip(files: FileList) {
    // 將FileList中的每個文件添加到ZIP中
    for (const file of files) {
        const arrayBuffer = await file.arrayBuffer();
        jszip.file(file.name, arrayBuffer); // 保留原始文件名
    }

    // 生成Blob格式的ZIP內(nèi)容
    const content = await jszip.generateAsync({ type: "blob" });

    // 創(chuàng)建下載鏈接并觸發(fā)下載
    const link = document.createElement("a");
    link.href = URL.createObjectURL(content);
    link.download = "archive-jszip.zip";
    link.click();
    
    // 釋放URL對象
    URL.revokeObjectURL(link.href);
}

3.4 使用 fflate 創(chuàng)建 ZIP 文件

fflate 使用同步方式創(chuàng)建 ZIP 文件，效率更高但需要手動準(zhǔn)備數(shù)據(jù)。

import { zipSync } from 'fflate';

async function compressWithFFlate(files: FileList) {
    const fileMap: Record<string, Uint8Array> = {};

    // 準(zhǔn)備文件數(shù)據(jù)
    for (const file of files) {
        const arrayBuffer = await file.arrayBuffer();
        fileMap[file.name] = new Uint8Array(arrayBuffer);
    }

    // 同步生成ZIP二進制數(shù)據(jù)
    const zipped = zipSync(fileMap);

    // 創(chuàng)建Blob并下載
    const blob = new Blob([zipped], { type: "application/zip" });
    const link = document.createElement("a");
    link.href = URL.createObjectURL(blob);
    link.download = "archive-fflate.zip";
    link.click();
    
    // 釋放URL對象
    URL.revokeObjectURL(link.href);
}

4. 完整示例與界面集成

以下是一個完整的示例，集成了圖形界面，允許用戶在 JSZip 和 fflate 之間切換，并選擇壓縮或解壓模式：

import { GUI } from 'lil-gui';
import JSZip from 'jszip';
import { strFromU8, unzipSync, zipSync } from "fflate";

const jszip = new JSZip();

window.onload = () => {
    const params = {
        type: "jszip",
        mode: "decompress",
        upload: () => {
            params.mode === "decompress" ? fileInput.click() : uploadFile.click();
        }
    }
    
    // 創(chuàng)建圖形控制界面
    const gui = new GUI();
    gui.add(params, 'mode', ['decompress', 'compress']);
    gui.add(params, 'type', ['fflate', 'jszip']);
    gui.add(params, 'upload');

    // 方法映射
    const decompressMap = {
        jszip: decompressWithJSZip,
        fflate: decompressWithFFlate
    }

    const compressMap = {
        jszip: compressWithJSZip,
        fflate: compressWithFFlate
    }

    // 解壓文件輸入
    const fileInput = document.createElement('input');
    fileInput.style.display = 'none';
    fileInput.type = 'file';
    fileInput.accept = '.zip';
    fileInput.multiple = true;
    document.body.appendChild(fileInput);

    fileInput.addEventListener('change', async (e) => {
        const files = (e.target as HTMLInputElement).files;
        if (!files) {
            return;
        }
        console.time(`use ${params.type}`);
        await Promise.all(Array.from(files).map(async (file) => {
            await decompressMap[params.type as keyof typeof decompressMap](file);
        }));
        console.timeEnd(`use ${params.type}`);
        (e.target as HTMLInputElement).value = "";
    })

    // 壓縮文件輸入
    const uploadFile = document.createElement('input');
    uploadFile.style.display = 'none';
    uploadFile.type = 'file';
    uploadFile.multiple = true;
    document.body.appendChild(uploadFile);

    uploadFile.addEventListener('change', async (e) => {
        const files = (e.target as HTMLInputElement).files;
        if (!files) {
            return;
        }
        await compressMap[params.type as keyof typeof compressMap](files);
        (e.target as HTMLInputElement).value = "";
    })
}

async function decompressWithJSZip(file: File) {
    const zip = await jszip.loadAsync(file);

    for (const [relativePath, fileEntry] of Object.entries(zip.files)) {
        try {
            if (relativePath.endsWith(".json")) {
                const jsonText = await fileEntry.async("string");
                const jsonData = JSON.parse(jsonText);
                console.log("[JSZip] JSON 文件:", relativePath, jsonData);
            } else if (relativePath.endsWith(".xml")) {
                const xmlText = await fileEntry.async("string");
                console.log("[JSZip] XML 文件:", relativePath, xmlText);
            }
        } catch (err) {
            console.error(`[JSZip] 解析失敗: ${relativePath}`, err);
        }
    }
}

async function decompressWithFFlate(file: File) {
    const arrayBuffer = await file.arrayBuffer();
    const files = unzipSync(new Uint8Array(arrayBuffer));

    for (const [path, fileEntry] of Object.entries(files)) {
        try {
            if (path.endsWith(".json")) {
                const jsonText = strFromU8(fileEntry);
                const jsonData = JSON.parse(jsonText);
                console.log("[FFlate] JSON 文件:", path, jsonData);
            } else if (path.endsWith(".xml")) {
                const xmlText = strFromU8(fileEntry);
                console.log("[FFlate] XML 文件:", path, xmlText);
            }
        } catch (err) {
            console.error(`[FFlate] 解析失敗: ${path}`, err);
        }
    }
}

async function compressWithJSZip(files: FileList) {
    // 添加每個文件
    for (const file of files) {
        const arrayBuffer = await file.arrayBuffer();
        jszip.file(file.name, arrayBuffer); // 保留原文件名
    }

    // 生成 Blob 格式的 zip
    const content = await jszip.generateAsync({ type: "blob" });

    // 下載
    const link = document.createElement("a");
    link.href = URL.createObjectURL(content);
    link.download = "archive-jszip.zip";
    link.click();
}

async function compressWithFFlate(files: FileList) {
    const fileMap: Record<string, Uint8Array> = {};

    for (const file of files) {
        const arrayBuffer = await file.arrayBuffer();
        fileMap[file.name] = new Uint8Array(arrayBuffer);
    }

    // 生成 zip（二進制）
    const zipped = zipSync(fileMap);

    // 下載
    const blob = new Blob([zipped], { type: "application/zip" });
    const link = document.createElement("a");
    link.href = URL.createObjectURL(blob);
    link.download = "archive-fflate.zip";
    link.click();
}