gzip，brotliCompress，deflate三种压缩算法对比，vue3最适合用哪种

文章目录

- - 一、三种压缩算法核心详情
  - - [1. gzip](#1. gzip)
    - [2. Brotli（brotliCompress）](#2. Brotli（brotliCompress）)
    - [3. deflate](#3. deflate)
  - 二、优缺点与使用场景对比
  - [三、Vue3 项目常用选择](#三、Vue3 项目常用选择)
  - - [1. 主流方案](#1. 主流方案)
    - [2. Vite 配置示例（vite-plugin-compression）](#2. Vite 配置示例（vite-plugin-compression）)
    - [3. 选择建议](#3. 选择建议)

一、三种压缩算法核心详情

1. gzip

原理：基于 DEFLATE（LZ77 + Huffman编码），额外添加文件头/尾与CRC校验。
压缩比 ：60%--80%（文本类）。
速度：压缩/解压速度均衡，CPU消耗中等。
兼容性 ：全平台/全浏览器支持（最广泛）。

2. Brotli（brotliCompress）

原理：增强型LZ77 + 二阶上下文建模 + 内置Web静态字典（HTML/CSS/JS关键词）。
压缩比 ：70%--90%（文本优于gzip约10%--20%）。
速度：压缩略慢、解压极快；高压缩级别CPU消耗更高。
兼容性：现代浏览器（Chrome≥49、Firefox≥44、Edge≥15）全覆盖。

3. deflate

原理：纯DEFLATE算法，无gzip的头/尾与校验，轻量。
压缩比：与gzip几乎一致。
速度：压缩略快于gzip，但无校验、出错难排查。
兼容性 ：HTTP场景常用，但实际部署远少于gzip。

二、优缺点与使用场景对比

维度	gzip	Brotli	deflate
压缩比	中等	最高	中等（同gzip）
速度	均衡	压缩慢、解压快	略快于gzip
兼容性	最佳	现代浏览器良好	一般
CPU消耗	中等	较高（压缩）	低
校验	有（CRC）	有	无
适用场景	通用Web、兼容优先、高并发	静态资源极致优化、现代浏览器、CDN	轻量HTTP、无校验场景
不适合	极致体积优化	旧浏览器、低CPU服务器	需数据完整性保障

三、Vue3 项目常用选择

1. 主流方案

首选：Brotli + gzip 双压缩 （Vite 生态标配）。
- 现代浏览器用 Brotli（更小体积、更快解压）。
- 旧浏览器/服务器 fallback 到 gzip（兼容兜底）。
次选：仅 gzip（兼容优先、无需复杂配置）。
极少用：deflate（无校验、部署麻烦，Vue3 几乎不用）。

2. Vite 配置示例（vite-plugin-compression）

typescript 复制代码

import viteCompression from 'vite-plugin-compression';

export default defineConfig({
  plugins: [
    // Brotli 压缩（.br）
    viteCompression({
      algorithm: 'brotliCompress',
      ext: '.br',
      threshold: 10240, // 10KB 以上才压缩
    }),
    // Gzip 压缩（.gz）
    viteCompression({
      algorithm: 'gzip',
      ext: '.gz',
      threshold: 10240,
    }),
  ],
});

3. 选择建议

追求极致性能 ：优先 Brotli，配合 gzip 兼容。
兼容优先/简单部署 ：仅开 gzip。
Vue3 + Vite ：Brotli + gzip 双开是行业最佳实践。