如何通过 CompressionStream 与 DecompressionStream 实现前端流式 Gzip 压缩-js教程-PHP中文网

compressionstream 和 decompressionstream 仅支持在 readablestream 管道中流式压缩/解压，需 textencoder/textdecoder 配合处理字符串，仅 chromium ≥117 和 firefox ≥125 支持，safari 不支持；适用于 service worker 响应压缩、大 json 请求体上传压缩及前端解压 gzip 响应，但不支持同步压缩，小数据（＜100kb）不建议使用，全平台兼容应选 pako。

如何通过 compressionstream 与 decompressionstream 实现前端流式 gzip 压缩

CompressionStream 和 DecompressionStream 不能直接压缩字符串或 ArrayBuffer，只能在 ReadableStream 管道中工作，且仅 Chromium（Chrome/Edge ≥117）和 Firefox ≥125 支持，Safari 完全不支持。它们适用于流式、实时的 gzip 压缩/解压场景，比如 Service Worker 拦截响应、大 JSON 请求体压缩上传、或前端解压服务端返回的 gzip 响应体。

压缩流程：从 JSON 到 gzip 流

必须把原始数据转为 Uint8Array，再封装成 ReadableStream，才能接入 CompressionStream：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

用 TextEncoder 将字符串（如 JSON）编码为 Uint8Array
创建 ReadableStream，在 start 中 enqueue 编码后数据并 close
调用 pipeThrough(new CompressionStream("gzip")) 得到压缩流
用 getReader() 读取压缩后的 Uint8Array 分块（可能多 chunk）

示例关键代码：

const encoder = new TextEncoder();
const stream = new ReadableStream({
  start(controller) {
    controller.enqueue(encoder.encode(JSON.stringify(data)));
    controller.close();
  }
});
const compressedStream = stream.pipeThrough(new CompressionStream("gzip"));
const reader = compressedStream.getReader();
// 后续逐块读取 value（Uint8Array）

解压流程：从 gzip 流还原为文本

DecompressionStream 输出仍是二进制流（Uint8Array），需用 TextDecoder 转为字符串，不能直接 .json()：

输入源可以是 fetch().body、Blob.stream() 或自建 ReadableStream（如 base64 解码后转 Uint8Array）
通过 pipeThrough(new DecompressionStream("gzip")) 得到解压流
用 getReader() 读取 Uint8Array chunk，再用 TextDecoder().decode() 拼接还原
若原始是 JSON，最后再 JSON.parse() —— 注意：必须等所有 chunk 读完再解析，否则会 SyntaxError

实际可用的典型场景

Service Worker 中拦截并压缩 HTML/JS 响应：用 Response 构造器包装原始 body，再 pipeThrough CompressionStream，返回新 Response
axios 请求体压缩（仅 Chromium/Firefox）：在请求拦截器中对大于阈值的普通对象 data 自动走上述压缩流程，并设置 headers: { 'Content-Encoding': 'gzip' }
前端解压服务端返回的 gzip 响应：fetch 后检查 response.headers.get('content-encoding') === 'gzip'，再对 response.body 管道解压（注意：多数现代浏览器已自动解压，此操作仅用于特殊定制逻辑）