Compression Streams 是 Node.js 和现代浏览器提供的底层字节流压缩 API,用于实时 gzip/deflate 编码,不处理 HTML 语义;它与 html-minifier-terser 等文本级 HTML 压缩工具职责分离,前者压缩二进制,后者精简标签结构。
不是 HTML 的特性,也不是 HTML 压缩工具或构建配置项——它是 Node.js(v15.0+)和现代浏览器(Chrome 103+、Firefox 110+、Safari 16.4+)提供的
底层流式压缩 API
,用于在内存中实时压缩/解压数据块,
不直接处理 HTML 字符串或文件内容结构
。
它和你日常做的「HTML 压缩」(删空格、去注释、缩布尔属性)完全不在同一层:前者是二进制字节流的编码变换(如 gzip、deflate),后者是 HTML 文本的语义化精简。混淆这两者,容易在构建流程里加错环节、白配参数、甚至阻塞渲染。
为什么
html
-webpack-plugin 或 html-minifier-terser 不用 Compression Streams?
因为它们工作在「文本解析与重写」层面,需要理解 HTML 标签、属性、注释、
内容等语义;而
只认字节,不认标签:
输入是字符串,输出是更短的字符串——它要跳过
里的换行、保留
缩进,这些都依赖 HTML 解析器
输入是
或
,输出是另一段压缩后的字节流——它对
和随机二进制数据的处理逻辑完全一样
Webpack 构建产物是文件系统上的
文件,不是 HTTP 响应流;你没法在打包时用
“压缩一个字符串”,它必须接在可读/可写流链路上
换句话说:
是给「运行时动态响应」或「大文件分块压缩」用的,不是给「构建时 HTML 文本优化」用的。
立即学习
“
前端免费学习笔记(深入)
”;
什么场景下真要用 CompressionStream 处理 HTML?
只有当你在做以下事情时,才需要它:
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
下载
Node.js 服务端用
流式返回 HTML(比如 SSR 中边渲染边吐 chunk),且想在发送前实时 gzip —— 此时用
接在
后
前端通过
拿到 HTML 响应流,想在浏览器内存中解压后再解析(极少见,通常由浏览器自动处理)
构建产物上传前,对整个
目录打包成
流——这时用
(Node.js)或
(浏览器 Worker)更合适
示例(Node.js HTTP Server 流式压缩 HTML):
注意:
必须显式设
,否则浏览器不会解压;且该压缩发生在传输层,**完全不影响 HTML 内容本身是否已用
预处理过**。
常见错误:把 CompressionStream 当 HTML 压缩开关来配
典型误操作:
在 Webpack 配置里试图给
加
字段——插件根本不识别这个选项
用
处理
返回的字符串——报错:不能把 string 直接喂给流,必须先转
再转
以为开启
就能替代
——结果内联
里的空格全在,gzip 虽然省了点字节,但没解决关键冗余
真正该做的事:先用
做语义压缩(删注释、合空白、缩属性),再用
或服务器 gzip 做二进制压缩——两层不互斥,但必须分清先后和职责。
关键点就一个:
压的是字节,不是 HTML;它不看标签,只看 0 和 1。别让它干解析器的活。
Compression StreamsCompressionStreamhtml-minifier-terserCompressionStreamUint8ArrayReadableStream hello .htmlCompressionStreamCompressionStreamResponsenew CompressionStream('gzip')TransformStreamfetch()dist/.tar.gzzlib.createGzip()CompressionStreamapp.get('/index.html', async (req, res) => {
const htmlStream = fs.createReadStream('./dist/index.html');
const compressStream = new CompressionStream('gzip');
res.writeHead(200, {
'Content-Encoding': 'gzip',
'Content-Type': 'text/html; charset=utf-8'
});
htmlStream.pipe(compressStream).pipe(res);
});
resContent-Encodinghtml-minifier-terserhtml-webpack-plugincompression: trueCompressionStreamfs.readFileSync('index.html', 'utf8')TextEncoderUint8ArrayCompressionStreamminifyCSS: truehtml-minifier-terserCompressionStreamCompressionStream