在ReactJs中如何对.gz格式的压缩JSON文件进行解压处理

前置要求 #

首先确保你的Blob存储配置满足以下条件：

• 已配置CORS规则，允许你的React应用所在域名发起GET请求，允许的请求头至少包含range、accept
• 不要给该gzip文件配置Content-Encoding: gzip响应头，避免浏览器自动解压，你需要拿到原始的gz二进制数据自行处理

实现步骤 #

1. 安装解压依赖
   我们使用轻量的gzip解压库pako，全量体积不到30KB，解压2-3MB的文件耗时在毫秒级，不会阻塞页面渲染：

npm install pako
# 或使用yarn
yarn add pako

如果不想引入第三方依赖，也可以直接使用浏览器原生的DecompressionStream接口，兼容性覆盖90%以上的主流浏览器。

2. React代码实现
   以下是包含加载状态、错误处理的完整实现示例：

import { useState, useEffect } from 'react';
import pako from 'pako';

const GzipJsonFetcher = () => {
  const [jsonData, setJsonData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  // 你的gz文件地址
  const GZ_FILE_URL = 'https://abcd.blob.core.windows.net/mydir/largefilecompressed.json.gz';

  useEffect(() => {
    const fetchAndDecompress = async () => {
      setLoading(true);
      setError(null);
      try {
        const response = await fetch(GZ_FILE_URL);
        if (!response.ok) throw new Error(`请求失败，状态码：${response.status}`);
        // 拿到二进制原始数据
        const arrayBuffer = await response.arrayBuffer();
        // 解压gzip数据
        const decompressedUint8 = pako.ungzip(new Uint8Array(arrayBuffer));
        // 转成字符串后解析为JSON
        const jsonStr = new TextDecoder('utf-8').decode(decompressedUint8);
        const result = JSON.parse(jsonStr);
        setJsonData(result);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchAndDecompress();
  }, []);

  if (loading) return <div>数据加载中，请稍候...</div>;
  if (error) return <div>加载失败：{error}</div>;
  if (!jsonData) return null;

  // 后续渲染你的jsonData内容
  return <div>JSON数据加载完成，共{Object.keys(jsonData).length}条记录</div>;
};

export default GzipJsonFetcher;

低网速场景优化建议 #

• 给fetch请求添加下载进度监听，实时展示加载进度，降低用户等待焦虑
• 解压完成后将JSON数据存入localStorage或IndexedDB，并记录文件的etag标识，下次请求时先校验etag，文件无更新则直接使用本地缓存，不需要重复下载解压
• 如果JSON数据支持分片，可拆分压缩为多个小gz文件，按需分段加载

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