在 ReactJs 中解压一个 json 文件

Question

我已经使用 .gz 压缩在 blob 存储上存储了一个 json 文件，所以我的文件 url 看起来像这样 https://abcd.blob.core.windows.net/mydir/largefilecompressed.json.gz。所以现在我需要了解如何在 ReactJs 中获取它并解压缩到 largefilecompressed.json。

该文件是 2-3 MB 没有压缩，在低网络区域它需要时间加载并影响用户体验，这就是我想避免从服务器执行此操作的原因

Answer 1

没有理由不能解压缩存储在 react 或 javascript 中的 blob。你可以解压它，使用Web-Assembly，你可以做到这一点，它几乎是本机性能。

您可以使用pako 库来完成这项工作。

从它的文档中，

inflate

使用 inflate/ungzip 和选项解压缩数据。默认情况下通过包装头自动检测格式。

这是示例代码，其中一些 json.gz 是从 github 中随机挑选的。

const urls = [
  'https://raw.githubusercontent.com/NazarHarashchak/MobileBanking/9155a04a3ff064167537a7c32f9cca356a5c3ab4/FrontEnd/node_modules/.cache/eslint-loader/b3fa51dc9159babf532b97696dacb328bf0a70dc.json.gz',
  'https://raw.githubusercontent.com/mongodb-university/mflix-python/d9667e709bd400f3d3dbd6e7f1474b3702d9d5fa/data/mflix/comments.metadata.json.gz',
  'https://raw.githubusercontent.com/dump-sauraj/realme_rmx2185_dump964/3a9c42cac2977a13e43ca8bf1ff886fca730f158/system/system/etc/protolog.conf.json.gz'
]

async function exec(i = 0) {
  console.group('file: ', i);
  try {
    // fetch file with CORS enabled
    const res = await fetch(urls[i], {
      mode: 'cors'
    });
    // convert to arrayBuffer for further processing
    const buf = await res.arrayBuffer();
    // or get blob using `await res.blob()`
    // and convert blob to arrayBuffer using `await blob.arrayBuffer()`

    console.log('input size: ', buf.byteLength);

    // decompress file
    const outBuf = pako.inflate(buf);
    console.log('output size: ', outBuf.byteLength);

    // convert arrayBuffer to string
    const str = new TextDecoder().decode(outBuf);
    // console.log('json string', str);

    // print json object
    console.log('json object', JSON.parse(str));
  } catch (err) {
    console.error('unable to decompress', err);
  }
  console.groupEnd('file: ', i);
}

async function init() {
  for (let i in urls) await exec(i)
}
init()

<script src="https://cdnjs.cloudflare.com/ajax/libs/pako/2.0.3/pako.min.js" integrity="sha512-yJSo0YTQvvGOqL2au5eH0W4K/0FI0sTJuyHjiHkh0O31Lzlb814P0fDXtuEtzOj13lOBZ9j99BjqFx4ASz9pGA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

---

我尝试了几个包，如wasm-flate、wasm-gzip、d5ly 和pako，但只有 pako 的成功率最高。如果你觉得可以，可以考虑一下。

编辑：添加代码 cmets 并禁用完整 json 字符串的 console.log