使用 brotli 缩减和压缩网络载荷

Michael DiBlasio
Michael DiBlasio

此 Codelab 是对“缩减和压缩网络载荷”Codelab 的扩展,并假定您熟悉压缩的基本概念。与 gzip 等其他压缩算法相比,此 Codelab 探讨了 Brotli 压缩 (br) 如何进一步降低压缩比以及应用的总体大小。

应用屏幕截图

测量

在深入了解如何添加优化之前,最好先分析应用的当前状态。

  1. 点击 Remix to Edit 以使项目可修改。
  2. 如需预览网站,请按查看应用,然后按全屏 全屏

在前面的缩减网络载荷大小 Codelab 中,我们将 main.js 的大小从 225 KB 减小到了 61.6 KB。在此 Codelab 中,您将探索 Brotli 压缩功能如何进一步缩减此 bundle 的大小。

Brotli 压缩

Brotli 是一种更新的压缩算法,比 gzip 可以提供更好的文本压缩结果。根据 CertSimple,Brotli 的性能如下:

  • 比 JavaScript 的 gzip 小 14%
  • gzip 相比,HTML 缩减了 21%
  • CSS 大小比 gzip 缩减了 17%

要使用 Brotli,您的服务器必须支持 HTTPS。所有新型浏览器都支持 Brotli。支持 Brotli 的浏览器将在 Accept-Encoding 标头中添加 br

Accept-Encoding: gzip, deflate, br

您可以使用 Chrome 开发者工具“Network”(网络)标签页中的 Content-Encoding 字段(Command+Option+ICtrl+Alt+I)确定使用了哪种压缩算法:

“网络”面板。“Content-encoding”列会显示用于各种资产的编码,包括 gzip 和 brotli (br)。

如何启用 Brotli

如何设置网络服务器以发送 Brotli 编码的资源取决于您计划如何编码这些资源。您可以选择在请求时使用 Brotli 动态压缩资源(动态),也可以提前对资源进行编码,以便在用户请求资源时资源已被压缩(静态)。

动态压缩

动态压缩是指在浏览器请求资源时,动态压缩资源。

优点

  • 无需创建和更新已保存的压缩版资源。
  • 实时压缩效果特别适合动态生成的网页。

缺点

  • 在更高级别压缩文件以实现更好的压缩比需要更长时间。如果用户在服务器发送素材资源之前需要等待压缩,这可能会导致性能下降。

使用 Node 和 Express 进行动态压缩

server.js 文件负责设置托管应用的 Node 服务器。

const express = require('express');
const app = express();
app.use(express.static('public'));

const listener = app.listen(process.env.PORT, function() {
  console.log(`Your app is listening on port ${listener.address().port}`);
});

这一切只会导入 express 并使用 express.static 中间件加载 public/directory 中的所有静态 HTML、JS 和 CSS 文件(这些文件由 webpack 在每次构建时创建)。

为了确保所有资源在每次收到请求时都会使用 brotli 进行压缩,可以使用 shrink-ray 模块。首先,在 package.json 中将其添加为 devDependency

"devDependencies": {
  // ...
  "shrink-ray": "^0.1.3"
},

并将其导入服务器文件 server.js

const express = require('express');
const shrinkRay = require('shrink-ray');

并在挂载 express.static 之前将其添加为中间件:

// ...
const app = express();

// Compress all requests
app.use(shrinkRay());
app.use(express.static('public'));

现在重新加载应用,并在 Network 面板中查看 bundle 大小:

使用动态 Brotli 压缩时的软件包大小。

现在,您可以看到从 Content-Encoding 标头中的 bz 应用了 brotlimain.bundle.js225 KB 缩减到了 53.1 KB!与 gzip (61.6 KB) 相比,这大约小了 14%。

静态压缩

静态压缩的理念是提前压缩和保存资源。

优点

  • 因高压缩级别而导致的延迟时间不再是问题。现在,文件可以直接提取,因此无需即时执行任何操作来压缩文件。

缺点

  • 每次构建时都需要压缩资源。如果使用高压缩级别,构建时间可能会显著增加。

使用 Node 和 Express 与 Webpack 进行静态压缩

由于“静态压缩”涉及预先压缩文件,因此您可以在构建步骤中修改 webpack 设置,以压缩资源。brotli-webpack-plugin 可用于此目的。

首先,在 package.json 中将其添加为 devDependency

"devDependencies": {
  // ...
 "brotli-webpack-plugin": "^1.1.0"
},

与任何其他 webpack 插件一样,在配置文件 webpack.config.js 中导入该插件:

var path = require("path");

//...
var BrotliPlugin = require('brotli-webpack-plugin');

并将其添加到 plugins 数组中:

module.exports = {
  // ...
  plugins: [
    // ...
    new BrotliPlugin({
      asset: '[file].br',
      test: /\.(js)$/
    })
  ]
},

插件数组使用以下参数:

  • asset:目标资产名称。
  • [file] 会替换为原始资源文件名。
  • test:系统会处理与此正则表达式匹配的所有资源(即以 .js 结尾的 JavaScript 资源)。

例如,main.js 将重命名为 main.js.br

在应用重新加载并重新构建时,现在会创建主软件包的压缩版本。打开 Glitch 控制台,查看由 Node 服务器提供的最终 public/ 目录中的内容。

  1. 点击工具按钮。
  2. 点击 Console 按钮。
  3. 在控制台中,运行以下命令以切换到 public 目录并查看其所有文件:
cd public
ls -lh
使用静态 Brotli 压缩时的软件包大小

现在,bundle 的 Brotli 压缩版本 main.bundle.js.br 也会保存在此处,并且main.bundle.js 小约 76%(225 KB 对比 53 KB)。

接下来,告知服务器每当请求原始 JS 版本时发送这些 brotli 压缩文件。为此,请在使用 express.static 传送文件之前,在 server.js 中定义一个新路由。

const express = require('express');
const app = express();

app.get('*.js', (req, res, next) => {
  req.url = req.url + '.br';
  res.set('Content-Encoding', 'br');
  res.set('Content-Type', 'application/javascript; charset=UTF-8');
  next();
});

app.use(express.static('public'));

app.get 用于告知服务器如何响应特定端点的 GET 请求。然后,系统将使用回调函数来定义如何处理此请求。该路线的运作方式如下:

  • 指定 '*.js' 作为第一个参数意味着这适用于每个为提取 JS 文件而触发的端点。
  • 在回调中,.br 会附加到请求的网址,并且 Content-Encoding 响应标头会设置为 br
  • Content-Type 标头设置为 application/javascript; charset=UTF-8,以指定 MIME 类型。
  • 最后,next() 会确保序列继续执行可能的下一个回调。

由于某些浏览器可能不支持 Brotli 压缩,因此在返回 Brotli 压缩的文件之前,请检查 Accept-Encoding 请求标头是否包含 br,以确认 Brotli 是否受支持:

const express = require('express');
const app = express();

app.get('*.js', (req, res, next) => {
  if (req.header('Accept-Encoding').includes('br')) {
    req.url = req.url + '.br';
    console.log(req.header('Accept-Encoding'));
    res.set('Content-Encoding', 'br');
    res.set('Content-Type', 'application/javascript; charset=UTF-8');
  }

  next();
});

app.use(express.static('public'));

应用重新加载后,请再次查看“网络”面板。

捆绑包大小为 53.1 KB(原为 225 KB)

大功告成!您已使用 Brotli 压缩进一步压缩资源!

总结

此 Codelab 说明了 brotli 如何进一步缩减应用的总大小。在受支持的情况下,brotligzip 更强大的压缩算法。