快捷導(dǎo)航

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

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

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

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

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

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

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

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

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

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

主要局限：??

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

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

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

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

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

主要局限：??

??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 實(shí)現(xiàn)	? 極快，TypedArray 優(yōu)化
??內(nèi)存效率??	? 全文件加載內(nèi)存	? 高效，支持流式
??社區(qū)生態(tài)??	? 文檔豐富，示例多	? 相對較新，資源少
??體積??	? 相對較大	? 極輕量（幾 KB）
??適用場景??	常規(guī) ZIP 操作、快速開發(fā)	高性能需求、大文件處理

3. 實(shí)戰(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)建包含多個(gè)文件的 ZIP 壓縮包。

import JSZip from 'jszip';

const jszip = new JSZip();

async function compressWithJSZip(files: FileList) {
    // 將FileList中的每個(gè)文件添加到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二進(jìn)制數(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. 完整示例與界面集成

以下是一個(gè)完整的示例，集成了圖形界面，允許用戶在 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) {
    // 添加每個(gè)文件
    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（二進(jìn)制）
    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();
}