React组件导入本地GZIP二进制文件并使用pako解压的实现问题

为什么import不能直接读取二进制数据 #

• import是ECMAScript模块导入语法，仅支持导入JS/TS模块或被打包工具（如Webpack、Vite）预配置处理的资源（如图片、字体）。直接导入二进制文件时，打包工具会尝试将其解析为JS代码，而二进制数据不符合JS语法规范，因此会抛出Uncaught SyntaxError: Invalid or unexpected token错误。

正确的处理方法：使用Fetch API读取并解压 #

步骤1：安装pako库 #

执行命令安装解压依赖：

npm install pako
# 或
yarn add pako

步骤2：放置GZIP文件 #

将你的GZIP压缩文件放在React项目的public目录下（该目录下的文件会被直接复制到打包产物中，无需编译，可通过根相对路径访问）。

步骤3：实现Hook/函数式组件 #

下面是一个自定义Hook和使用示例，完成文件请求、解压和渲染：

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

// 自定义Hook：读取并解压GZIP文件
const useUnzippedGzip = (filePath) => {
  const [content, setContent] = useState(null);
  const [loadError, setLoadError] = useState(null);

  useEffect(() => {
    const loadAndUnzip = async () => {
      try {
        // 请求本地GZIP文件
        const res = await fetch(filePath);
        if (!res.ok) throw new Error(`HTTP错误: ${res.status}`);
        
        // 将响应转为ArrayBuffer，再转为Uint8Array供pako处理
        const arrayBuffer = await res.arrayBuffer();
        const uint8Data = new Uint8Array(arrayBuffer);
        
        // 解压数据：如果是文本内容用{ to: 'string' }，二进制数据则移除该配置
        const unzipped = pako.inflate(uint8Data, { to: 'string' });
        setContent(unzipped);
      } catch (err) {
        setLoadError(err.message);
      }
    };

    if (filePath) loadAndUnzip();
  }, [filePath]);

  return { content, loadError };
};

// 使用组件示例
const GzipContentViewer = () => {
  // 假设GZIP文件名为data.gz，放在public目录下
  const { content, loadError } = useUnzippedGzip('/data.gz');

  if (loadError) return <div>加载失败: {loadError}</div>;
  if (!content) return <div>加载中...</div>;

  return (
    <div>
      <h3>解压后内容</h3>
      <p>{content}</p>
    </div>
  );
};

export default GzipContentViewer;

补充说明 #

• 如果你的GZIP文件包含的是二进制数据（而非文本），只需移除pako.inflate的{ to: 'string' }配置，解压后会返回Uint8Array，可根据需求进一步处理。
• 若使用Vite或Webpack，也可通过配置资源 loader 处理二进制文件，但Fetch API的方式无需修改打包配置，更通用便捷。

内容的提问来源于stack exchange，提问作者Alex Reynolds