ANSI Spinners、Progress Bars、Decorations — 全部消失

Source: Dev.to

什么是 ANSI 动画？

当你运行诸如 npm install 之类的命令时，你会注意到一个旋转的点或一个看似平滑更新的进度条。这些都是 ANSI 动画——通过光标移动的转义序列多次重绘同一行。终端只显示一行动画，但原始输出实际上包含了数百行带有光标移动代码的文本。

spinner 的工作原理

spinner 会反复打印一个帧，移动光标回到行首，然后打印下一个帧。

Print ⠋ Loading...
Move cursor to start of line (\x1b[G)
Print ⠙ Loading...
Move cursor to start of line
Repeat 200 times

终端显示的是一个平滑的动画，而底层输出则包含 200 行文本，交错着光标移动代码。

进度条示例

进度条会产生更多的转义序列：

\x1b[2K\x1b[1A\x1b[2K\x1b[G⸨░░░░░░░░░░░░░░░░░░░░⸩ 5%
\x1b[2K\x1b[1A\x1b[2K\x1b[G⸨█░░░░░░░░░░░░░░░░░░⸩ 10%
\x1b[2K\x1b[1A\x1b[2K\x1b[G⸨██░░░░░░░░░░░░░░░░░░⸩ 15%
... (17 more updates)
\x1b[2K\x1b[1A\x1b[2K\x1b[G⸨████████████████████⸩ 100%

每一次更新都会增加 30 多字节的转义码，导致出现大量冗余行，AI 需要处理这些内容。

为什么单纯去除 ANSI 代码不足够

去除 ANSI 代码可以去掉视觉装饰，但会留下被光标移动代码覆盖的重复行，这仍然会浪费 token 空间。要实现真正的压缩，需要 合并被光标移动代码覆盖的行，只保留每行的最终状态。

结果类似于：

added 847 packages in 12s
💾 contextzip: 12,847 → 142 chars (99% saved)

这可以在动画密集的输出中实现高达 99 % 的节省。

使用 ContextZip 压缩 ANSI 输出

contextzip 可以自动合并这些动画：

cargo install contextzip
eval "$(contextzip init)"

你也可以通过 npx 运行它：

npx contextzip

链接

• GitHub 仓库:
• npm 包: