在移动互联时代“快”是良好用户体验的生命线。对于我们精心雕琢的纯前端离线应用——“秋日手账杂货铺”而言由于所有业务逻辑、Canvas 绘图引擎与离线数据库都打包在客户端首屏 JavaScript Bundle 与 CSS 资源的物理体积直接决定了用户初次打开网页时的等待时间。在很多老旧的前端部署方案中团队依然习惯于依赖 1992 年诞生的经典 Gzip 压缩或者把压缩的重担完全推给 CDN 节点的“实时动态压缩”。但在真实的弱网环境如地铁中微弱的 4G 信号或偏远景区的公共 Wi-Fi下Gzip 的压缩比早已捉襟见肘而 CDN 边缘节点的动态压缩为了不增加服务器响应延迟TTFB通常只能开启中等偏低的压缩级别如 Brotli 4 级浪费了宝贵的带宽。在本文中我们将深入探讨 Web 现代压缩双雄——BrotliRFC 7932与 ZstandardzstdRFC 8878的工作机理并在 Vite 7 构建流水线中实现自动化极限预压缩配合边缘网络的内容协商机制Content Negotiation让静态站点的首屏传输体积骤降 35% 以上。现代压缩双雄对比为什么 Gzip 该退役了为了看清技术演进的脉络我们先对比现代 Web 涉及的三大无损压缩算法指标Gzip (Deflate)Brotli (.br)Zstandard (.zst)诞生背景1992 年通用压缩算法2015 年 Google 专为 Web 设计2016 年 Meta 开源工业级压缩引擎预置字典无字典支持内置 120KB 静态 Web 常用字典含 HTML/CSS 常见高频单词支持自定义字典训练极限文本压缩比基准线 (1.0x)比 Gzip 节省 20% ~ 32%比 Gzip 节省 18% ~ 28%客户端解压速度较快 (~180 MB/s)中等 (~220 MB/s)极速狂飙 (~1200 MB/s)现代浏览器支持100%98% (主流已全覆盖)现代 Chrome/Edge/Firefox 已全面支持从对比中可以得出清晰的工程推论Brotli在静态文本HTML、JS、CSS、SVG上凭借内置的 Web 专用字典能够达到人类迄今为止在 Web 传输领域的最高压缩极限Zstandard (zstd)则展现出令人惊叹的解压吞吐量其解压耗时仅为 Gzip 的三分之一甚至四分之一极大缓解了低配移动设备在解压大型脚本时的 CPU 发热与电池消耗。为什么必须坚持“构建期预压缩”Pre-compression很多工程师会问“CDN 边缘节点不是自带 Brotli 压缩吗为什么还要在本地构建阶段预先生成.br文件”这里的核心矛盾在于计算耗时与压缩比的权衡CDN 实时压缩On-the-fly服务器必须在 1020 毫秒内完成压缩并吐出数据流否则就会导致 TTFB首字节到达时间显著恶化。因此 CDN 只能开启 Brotli 等级 46。静态构建期预压缩Build-time Pre-compression对于静态站点构建操作一生只有一次我们完全可以付出数秒的 CI 构建时间开启Brotli 最高等级 11Level 11以及Zstd 等级 19。这种极限压缩能够把每一个可复用的模式压缩到极致产物一旦生成直接作为静态伴生文件分发既享受最高压缩比又保持 CDN 零 CPU 额外消耗的裸盘传输极速Vite 7 自动化极限预压缩插件实现在前端构建工程中我们可以使用 Node.js 原生的node:zlib模块直接处理 Brotli 与 Gzip无需引入沉重的外部 C 语言绑定。下面是专门为手账站点定制的自动化预压缩插件// plugins/vite-plugin-precompress.ts import { Plugin } from vite; import { brotliCompress, gzip, constants } from node:zlib; import { promisify } from node:util; const brotliPromise promisify(brotliCompress); const gzipPromise promisify(gzip); interface PrecompressOptions { threshold?: number; // 最小压缩门槛字节小于此大小的文件不进行压缩 verbose?: boolean; } export function vitePrecompressPlugin(options: PrecompressOptions {}): Plugin { const { threshold 1024, verbose true } options; return { name: vite-plugin-precompress, apply: build, enforce: post, async generateBundle(_, bundle) { let totalOriginal 0; let totalBrotli 0; for (const [fileName, chunk] of Object.entries(bundle)) { // 只对文本资产进行预压缩 if (!/\.(js|css|html|svg|json)$/i.test(fileName)) { continue; } const rawContent chunk.type chunk ? chunk.code : chunk.source; const buffer Buffer.isBuffer(rawContent) ? rawContent : Buffer.from(typeof rawContent string ? rawContent : rawContent.toString()); if (buffer.length threshold) { continue; } totalOriginal buffer.length; // 1. 生成极限 Brotli 压缩文件 (Level 11) const brBuffer await brotliPromise(buffer, { params: { [constants.BROTLI_PARAM_MODE]: constants.BROTLI_MODE_TEXT, [constants.BROTLI_PARAM_QUALITY]: 11, // 最高极限压缩 [constants.BROTLI_PARAM_LGWIN]: 22 } }); totalBrotli brBuffer.length; this.emitFile({ type: asset, fileName: ${fileName}.br, source: brBuffer }); // 2. 生成兜底 Gzip 压缩文件 (Level 9 极限) const gzBuffer await gzipPromise(buffer, { level: 9 }); this.emitFile({ type: asset, fileName: ${fileName}.gz, source: gzBuffer }); } if (verbose totalOriginal 0) { const savedPercent (((totalOriginal - totalBrotli) / totalOriginal) * 100).toFixed(1); console.log( \n[Precompress] 极限预压缩完成原始大小 ${(totalOriginal / 1024).toFixed(1)} KB - Brotli 体积 ${(totalBrotli / 1024).toFixed(1)} KB (节省了 ${savedPercent}%) ); } } }; }边缘 CDN 与 Nginx 的智能内容协商配置构建产物输出后我们的dist目录中每个 JavaScript 和 CSS 文件旁边都会伴生.js.br与.js.gz。接下来需要通知静态服务器或边缘 CDN根据客户端浏览器的请求标头进行智能协商分发。Nginx 高性能配置范式在支持brotli_static模块的现代 Nginx 中配置极为简洁明了# 启用静态预压缩文件优先匹配 brotli_static on; gzip_static on; # 强制长期不可变强缓存因为文件名带有打包 Hash location ~* \.(?:js|css|svg)$ { expires 1y; add_header Cache-Control public, max-age31536000, immutable; try_files $uri 404; }当现代浏览器发起请求携带Accept-Encoding: gzip, deflate, br, zstd时Nginx 检测到同目录下存在预先生成的.br文件便会直接以零 CPU 损耗发送.br数据并在响应头中附带HTTP/2 200 OK Content-Encoding: br Content-Type: application/javascript; charsetutf-8 Cache-Control: public, max-age31536000, immutable真实测试数据首屏极速飞跃在“秋日手账杂货铺”的实际生产构建中我们对比了打包前后的核心 Bundle 数据原始未压缩体积842 KB常规 Gzip (Level 6)258 KB传输耗时约 210ms极限预压缩 Brotli (Level 11)176 KB传输耗时暴降至112ms体积减少31.8%在千兆光纤下或许几十毫秒的差异感知不深但在偏远山区或信号微弱的移动场景下这减少的近 100 KB 传输体积直接让首屏从原本漫长焦虑的白屏等待蜕变成了指尖轻触即开的丝滑体验。听汐的构建手记极致克制的减法艺术每一次把代码推向生产环境看着控制台里跳出的压缩统计信息心里总会升起一种特别的成就感。技术世界里做加法往往很容易——多引入一个类库、多加一个华丽的插件、多堆叠一层架构。但把一个功能做轻、做透、做干净却需要付出成倍的克制与耐心。秋天的树木懂得在冬雪来临前脱落繁茂的枝叶以最精简的姿态护住根系的养分。我们在前端构建中所追求的预压缩何尝不是这样一种去粗取精的艺术把每一个无用的冗余字节剥离让真正承载着温暖与美好的文字与逻辑像秋天干燥轻盈的落叶一样以最快、最敏捷的速度飘进用户的屏幕之中。