还在用 Gzip 压缩？试试新宠儿 Brotli 压缩！

前言

Hello~大家好。我是秋天的一阵风

之前我曾撰写过一篇关于项目性能优化的文章------《vue2都停止更新维护了，你还没学会打包优化吗？（打包体积减少78%，冷启动速度提升93%，打包速度提升73%）》。在文章中，我详细介绍了多种优化打包体积的方法，其中就包括了广为人知的gzip压缩技术。

gzip压缩作为一种常见的优化手段，已经在众多项目中得到了广泛应用，其通过高效地压缩静态资源，显著减少了文件在网络传输过程中的体积，从而大幅提升了页面加载速度。

然而，可能许多同学并不知晓的是，早在2015年，谷歌就已经推出了一种全新的压缩算法------Brotli压缩 。相较于传统的gzip压缩，Brotli压缩 在多个方面展现出了极为明显的优势。它采用了更为先进的压缩技术，能够在不增加过多计算开销的前提下，实现更高的压缩率，进一步缩减了文件的传输体积。同时，Brotli压缩 还优化了压缩和解压缩的速度，使得整个过程更加高效流畅，为用户带来了更为出色的性能体验。

接下来，就让我们一同深入了解 Brotli压缩 的原理与应用，探索它如何为我们的项目性能优化带来全新的突破与提升。

一、什么是 Brotli 压缩？

Brotli 是一种通用的无损数据压缩算法，由 Google 在 2015 年开发并开源。它旨在提供比传统压缩算法（如 Gzip 和 Deflate）更高的压缩率，同时保持较快的压缩和解压缩速度。Brotli 压缩算法特别适合用于网络传输，可以显著减少数据传输量，提高网页加载速度和应用性能。

Brotli 的特点

高压缩率：
- Brotli 通常能够提供比 Gzip 更高的压缩率，尤其是在处理文本数据（如 HTML、CSS、JavaScript 等）时。这意味着在传输相同内容时，使用 Brotli 压缩的数据量更小，从而减少带宽消耗和加载时间。
快速解压缩：
- 尽管 Brotli 的压缩过程可能比 Gzip 稍慢，但其解压缩速度非常快，几乎与 Gzip 相当。这使得 Brotli 在客户端解压缩时不会显著增加延迟。
广泛支持：
- Brotli 已经被大多数现代浏览器支持，包括 Chrome、Firefox、Safari 和 Edge。此外，许多 Web 服务器（如 Nginx 和 Apache）也支持 Brotli 压缩。
灵活性：
- Brotli 提供了多种压缩级别（从 0 到 11），允许开发者根据需要在压缩率和压缩速度之间进行权衡。，而且不会丢失任何重要信息。就好比你把一堆衣服塞进真空袋，拿出来的时候还是那么完整，但体积却小了一大半。

二、Brotli 的工作原理

Brotli的卓越性能源于三重技术组合：

变种LZ77算法：通过滑动窗口匹配重复字符串，消除冗余数据（如重复的CSS类名、JS函数）；
动态霍夫曼编码 ：对高频字符分配更短的编码（例如HTML标签<div>的编码长度比低频字符短30%）；
二阶上下文建模 ：根据前两个字符预测当前字符的概率分布（如<sc后大概率接ript>），提升压缩密度。

关键创新 ：Brotli内置了一个120KB的预训练字典 ，包含13000+常见Web文本片段（如<!DOCTYPE html>、function()等），直接对小文件实现"开箱即用"的高效压缩。

三、在 Vue 项目中用 Brotli：超简单！

1.安装插件

在 Vue 项目中，我们可以用 compression-webpack-plugin 插件来实现 Brotli 压缩。先安装插件：

bash 复制代码

npm install --save-dev compression-webpack-plugin

2. 配置 Webpack

在 vue.config.js 文件里，加几行代码：

JavaScript 复制代码

const CompressionWebpackPlugin = require('compression-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new CompressionWebpackPlugin({
        algorithm: 'brotliCompress',
        test: /.(js|css|html|svg)$/,
        threshold: 10240, // 只有文件大小大于 10KB 时才进行压缩
        minRatio: 0.8, // 压缩率小于 0.8 时才进行压缩
        deleteOriginalAssets: false, // 不删除原始文件
      }),
    ],
  },
};

3. 配置nginx

(1).安装

安装 Brotli 模块包 nginx-plus-module-brotli。

对于 Amazon Linux 2 LTS、CentOS、Oracle Linux 和 RHEL：
bash 复制代码
```
yum install nginx-plus-module-brotli
```
对于 Amazon Linux 2023、AlmaLinux、Rocky Linux：
bash 复制代码
```
dnf install nginx-plus-module-brotli
```
对于 Debian 和 Ubuntu：
bash 复制代码
```
apt-get install nginx-plus-module-brotli
```
对于 SLES 15：
bash 复制代码
```
zypper install nginx-plus-module-brotli
```
对于 FreeBSD：
bash 复制代码
```
pkg install nginx-plus-module-brotli
```

(2).配置

安装完成后，需要在 NGINX Plus 的配置文件 nginx.conf 中启用并配置 Brotli 模块。

在最顶层（"主"）上下文中，使用 load_module 指令启用 Brotli 模块的动态加载：

nginx 复制代码

load_module modules/ngx_http_brotli_filter_module.so; # 用于实时压缩响应
load_module modules/ngx_http_brotli_static_module.so; # 用于提供预压缩文件

nginx 复制代码

http {
    # 加载 Brotli 模块（如果是动态模块）
    load_module modules/ngx_http_brotli_filter_module.so;
    load_module modules/ngx_http_brotli_static_module.so;

    # 开启 Brotli 压缩
    brotli on;
    brotli_comp_level 6;  # 压缩级别，范围为 1-11，数值越大压缩效果越好，但 CPU 消耗也越大
    brotli_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

    server {
        listen 80;
        server_name yourdomain.com;

        location / {
            root /var/www/html;
            index index.html index.htm;
            try_files $uri $uri/ =404;

            # Brotli 压缩设置
            brotli_dynamic_buffer 8k;
            brotli_min_length 1024;  # 最小压缩长度
            brotli_quality 6;       # 压缩质量
            brotli_max_length 4096; # 最大压缩长度
        }
    }
}

测试配置文件并重新加载 NGINX 以启用该模块：

bash 复制代码

nginx -t && nginx -s reload

四、兼容性

Brotli 压缩在大多数现代浏览器中都得到了支持，包括但不限于以下主流浏览器：

Chrome：自 Chrome 59 开始支持 Brotli。
Firefox：自 Firefox 44 开始支持。
Safari：自 Safari 11 开始支持。
Edge：自 Edge 15 开始支持。
Opera：自 Opera 46 开始支持。

五、使用限制

1. 浏览器支持限制

HTTPS 限制：Brotli 压缩在 Chrome 浏览器中仅支持通过 HTTPS 协议传输的内容。如果网站未启用 HTTPS，Chrome 浏览器将不会使用 Brotli 压缩，而是回退到 Gzip 或其他支持的压缩方式。

2. 服务器配置限制

服务器模块支持 ：并非所有服务器都默认支持 Brotli 压缩。例如，Nginx 需要通过编译安装额外的模块（如 ngx_http_brotli_filter_module 和 ngx_http_brotli_static_module）来支持 Brotli。Apache 服务器也需要安装并配置 mod_brotli 模块。

3. 性能限制

压缩速度：Brotli 的压缩速度通常比 Gzip 慢。虽然 Brotli 的压缩率更高，但压缩过程需要更多的计算资源，这可能导致服务器在处理高并发请求时性能下降。
CPU 占用率：Brotli 压缩需要更高的 CPU 占用率。在资源受限的服务器上，使用 Brotli 可能会对服务器的整体性能产生负面影响。

结语

Brotli 压缩是前端性能优化上值得选择的一种方案，它不仅能帮我们把文件压缩得更小，还能让网页加载得更快。虽然它在压缩时可能需要更多的计算资源，但解压缩速度和 Gzip 相当，而且现代浏览器对它的支持也越来越好。所以，如果你还在用 Gzip，不妨试试 Brotli，说不定它会成为你的新宠儿呢！