使用 Express.js 中的中间件实现数据压缩

引言 🌟

嗨，大家好！欢迎来到今天的讲座。今天我们要聊一聊如何在 Express.js 中使用中间件来实现数据压缩。如果你是一个后端开发者，或者正在学习 Node.js 和 Express.js，那么你一定知道性能优化是多么重要。想象一下，你的应用每天要处理成千上万的请求，如果每个请求都传输大量的未压缩数据，那不仅会拖慢用户的体验，还会增加服务器的负担。所以，今天我们就要教你怎么用中间件来压缩这些数据，让它们像气球一样变小，轻松飞到用户的浏览器中 😄。

什么是数据压缩？🎈

数据压缩是一种通过减少文件大小来节省带宽和存储空间的技术。它的工作原理是将原始数据转换为一种更紧凑的形式，使得在传输过程中占用的字节数更少。当数据到达客户端时，再将其解压还原为原始内容。常见的压缩算法有 Gzip、Brotli 等。

• Gzip：这是一种广泛使用的压缩算法，支持大多数现代浏览器。它通过查找重复的字符串并用更短的代码替换它们来减少文件大小。
• Brotli：这是 Google 开发的一种更高效的压缩算法，通常比 Gzip 压缩得更好，但计算成本略高。Brotli 也得到了越来越多浏览器的支持。

为什么需要数据压缩？📊

1. 节省带宽：压缩后的文件更小，传输所需的时间更短，尤其是在移动网络或低速网络环境下，用户体验会显著提升。
2. 加快页面加载速度：对于前端资源（如 HTML、CSS、JavaScript），压缩可以大大减少下载时间，从而加快页面的渲染速度。
3. 降低服务器负载：更小的数据包意味着服务器需要处理的流量更少，减少了服务器的压力，提高了整体性能。
4. 提高 SEO 排名：Google 等搜索引擎会优先推荐加载速度快的网站，因此使用数据压缩有助于提升你在搜索结果中的排名。

Express.js 中间件简介 🛠️

Express.js 是一个轻量级的 Node.js 框架，广泛用于构建 Web 应用程序。它的核心特性之一是中间件机制。中间件是一些函数，它们可以在请求到达路由处理器之前或之后执行一些操作。你可以把中间件想象成一个“过滤器”，它可以在请求和响应之间进行各种处理，比如日志记录、身份验证、错误处理等。

在 Express.js 中，中间件可以分为以下几类：

• 应用级中间件：全局应用于所有请求。
• 路由级中间件：只应用于特定的路由。
• 错误处理中间件：专门用于捕获和处理错误。
• 第三方中间件：由社区开发的插件，可以直接安装和使用。

今天我们要讨论的就是如何使用第三方中间件来实现数据压缩。具体来说，我们将使用 compression 这个中间件来压缩 HTTP 响应。

---

安装和配置 compression 中间件 📦

什么是 compression？

compression 是一个非常流行的 Express.js 中间件，它可以自动检测客户端是否支持压缩，并根据支持的压缩算法（如 Gzip 或 Brotli）对响应进行压缩。这个中间件非常轻量，易于集成，并且默认情况下会根据客户端的 Accept-Encoding 头来选择合适的压缩算法。

安装 compression

首先，我们需要安装 compression 中间件。打开你的终端，进入项目目录，然后运行以下命令：

npm install compression

这将会下载并安装 compression 及其依赖项。安装完成后，你就可以在项目中使用它了。

配置 compression

接下来，我们需要在 Express 应用中引入并配置 compression。假设你已经有一个基本的 Express 应用，代码如下：

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

app.get('/', (req, res) => {
  res.send('Hello, World!');
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

现在，我们只需要添加几行代码来引入 compression 并启用它。修改后的代码如下：

const express = require('express');
const compression = require('compression'); // 引入 compression 中间件
const app = express();
const port = 3000;

// 使用 compression 中间件
app.use(compression());

app.get('/', (req, res) => {
  res.send('Hello, World!');
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

就这么简单！app.use(compression()) 这一行代码告诉 Express，在处理每个请求之前，先通过 compression 中间件检查是否需要压缩响应。如果客户端支持压缩，compression 会自动压缩响应数据；否则，它会直接返回未压缩的数据。

配置选项 🛠️

compression 提供了一些可选的配置参数，允许你根据需求自定义压缩行为。以下是常用的几个选项：

选项	类型	默认值	描述
filter	Function	(req, res) => true	一个函数，用于决定是否对某个请求进行压缩。你可以根据请求的路径、内容类型等条件进行判断。
threshold	Number	1024	设置最小的响应体大小（以字节为单位），只有当响应体大于等于该值时才会进行压缩。
level	Number	6	设置 Gzip 的压缩级别，范围为 0 到 9，数值越大压缩效果越好，但速度越慢。
memLevel	Number	8	设置 Gzip 的内存使用级别，范围为 1 到 9，数值越大内存使用越多，但压缩速度更快。
strategy	Number	zlib.Z_DEFAULT_STRATEGY	设置 Gzip 的压缩策略，适用于不同的数据类型。
windowBits	Number	15	设置 Gzip 的窗口大小，影响压缩效率和内存使用。
flush	Number	zlib.Z_NO_FLUSH	设置 Gzip 的刷新模式，控制何时将压缩数据发送给客户端。
chunkSize	Number	16384	设置 Brotli 的块大小（仅适用于 Brotli）。
zlib	Object	{}	传递给 zlib 的额外选项，用于自定义 Gzip 行为。
brotli	Object	{}	传递给 Brotli 的额外选项，用于自定义 Brotli 行为。

示例：自定义 threshold 和 level

假设我们只想对大于 5KB 的响应进行压缩，并且希望使用更高的压缩级别（9），可以在配置 compression 时传入相应的选项：

const express = require('express');
const compression = require('compression');
const app = express();
const port = 3000;

app.use(compression({
  threshold: 5 * 1024, // 5KB
  level: 9 // 最高的压缩级别
}));

app.get('/', (req, res) => {
  res.send('Hello, World!');
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

示例：自定义 filter 函数

有时候你可能不希望对某些类型的请求进行压缩。例如，对于静态资源（如图片、视频等），压缩的效果并不明显，甚至可能会增加 CPU 负载。这时，你可以通过 filter 函数来排除这些请求。

const express = require('express');
const compression = require('compression');
const app = express();
const port = 3000;

app.use(compression({
  filter: (req, res) => {
    // 如果请求的 URL 包含 .jpg、.png、.gif 或 .mp4，则不进行压缩
    if (req.url.match(/.(jpg|png|gif|mp4)$/)) {
      return false;
    }
    return compression.filter(req, res);
  }
}));

app.get('/', (req, res) => {
  res.send('Hello, World!');
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

---

测试压缩效果 🧪

现在我们已经配置好了 compression，接下来让我们来看看它是否真的有效。我们可以使用一些工具来测试压缩效果，比如 Chrome DevTools、Postman 或者 curl 命令行工具。

使用 Chrome DevTools 测试

1. 打开 Chrome 浏览器，按 F12 或右键点击页面选择“检查”进入开发者工具。
2. 切换到“Network”标签页。
3. 在地址栏中输入 http://localhost:3000 并按下回车键。
4. 在 Network 面板中找到刚刚发出的请求，点击它展开详细信息。
5. 查看“Headers”选项卡，找到 Content-Encoding 头。如果显示 gzip 或 br，说明响应已经被压缩了。

此外，你还可以查看“Size”列，对比压缩前后的文件大小。通常，压缩后的文件大小会比原始文件小得多。

使用 curl 测试

curl 是一个非常强大的命令行工具，可以用来发送 HTTP 请求并查看响应头。我们可以通过 curl 来测试 compression 是否生效。

测试未压缩的响应

首先，我们发送一个不带 Accept-Encoding 头的请求，看看是否返回未压缩的响应：

curl -v http://localhost:3000

你应该会看到类似如下的输出：

* Connected to localhost (127.0.0.1) port 3000 (#0)
> GET / HTTP/1.1
> Host: localhost:3000
> User-Agent: curl/7.64.1
> Accept: */*
>
< HTTP/1.1 200 OK
< Content-Type: text/html; charset=utf-8
< Content-Length: 13
< Date: Mon, 15 Aug 2023 12:34:56 GMT
< Connection: keep-alive
<
Hello, World!

注意，这里没有 Content-Encoding 头，说明响应没有被压缩。

测试压缩的响应

接下来，我们发送一个带有 Accept-Encoding: gzip, br 头的请求，看看是否返回压缩的响应：

curl -H "Accept-Encoding: gzip, br" -v http://localhost:3000

你应该会看到类似如下的输出：

* Connected to localhost (127.0.0.1) port 3000 (#0)
> GET / HTTP/1.1
> Host: localhost:3000
> User-Agent: curl/7.64.1
> Accept: */*
> Accept-Encoding: gzip, br
>
< HTTP/1.1 200 OK
< Content-Type: text/html; charset=utf-8
< Content-Encoding: gzip
< Vary: Accept-Encoding
< Content-Length: 46
< Date: Mon, 15 Aug 2023 12:34:56 GMT
< Connection: keep-alive
<
[...压缩后的数据...]

这次，Content-Encoding 头显示为 gzip，说明响应已经被压缩了。你可以使用 gunzip 或其他工具来解压并查看原始内容。

使用 Postman 测试

Postman 是一个非常流行的 API 测试工具，支持发送各种类型的 HTTP 请求。我们也可以使用 Postman 来测试 compression 的效果。

1. 打开 Postman，创建一个新的 GET 请求，URL 为 http://localhost:3000。
2. 在“Headers”选项卡中添加一个 Accept-Encoding 头，值为 gzip, br。
3. 发送请求，查看响应头。如果 Content-Encoding 显示为 gzip 或 br，说明压缩成功。

---

性能优化技巧 🚀

虽然 compression 已经帮我们解决了大部分问题，但在实际项目中，我们还可以通过一些额外的优化技巧来进一步提升性能。下面是一些建议：

1. 缓存静态资源 🗄️

对于那些不会频繁变化的静态资源（如 CSS、JavaScript 文件），我们可以启用浏览器缓存。这样，用户在第二次访问时就不需要重新下载这些资源，而是直接从本地缓存中读取。

在 Express 中，我们可以使用 serve-static 中间件来提供静态文件，并通过设置 Cache-Control 头来控制缓存行为。例如：

const express = require('express');
const compression = require('compression');
const serveStatic = require('serve-static');
const app = express();
const port = 3000;

app.use(compression());
app.use(serveStatic('public', {
  setHeaders: (res, path, stat) => {
    if (path.endsWith('.css') || path.endsWith('.js')) {
      res.setHeader('Cache-Control', 'public, max-age=31536000'); // 一年
    }
  }
}));

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

2. 使用 CDN 分发静态资源 🌐

如果你的应用有大量的静态资源，考虑将它们托管到内容分发网络（CDN）上。CDN 可以在全球范围内分布服务器节点，确保用户可以从最近的服务器获取资源，从而减少延迟并提高加载速度。

常见的 CDN 服务提供商包括 Cloudflare、Akamai、AWS CloudFront 等。你可以通过简单的配置将静态资源上传到 CDN，并在应用中引用 CDN 上的 URL。

3. 启用 HTTP/2 协议 🔗

HTTP/2 是 HTTP 协议的一个重大升级，带来了许多性能改进，比如多路复用、头部压缩、服务器推送等。启用 HTTP/2 可以显著减少页面加载时间，尤其是在处理大量小文件时。

要在 Express 中启用 HTTP/2，你需要使用 HTTPS 协议，并安装 spdy 或 http2 模块。以下是一个简单的示例：

const express = require('express');
const compression = require('compression');
const spdy = require('spdy');
const fs = require('fs');
const app = express();

app.use(compression());

app.get('/', (req, res) => {
  res.send('Hello, World!');
});

const options = {
  key: fs.readFileSync('/path/to/key.pem'),
  cert: fs.readFileSync('/path/to/cert.pem')
};

spdy.createServer(options, app).listen(3000, () => {
  console.log('Server is running on https://localhost:3000');
});

4. 优化 JavaScript 和 CSS 文件 🛠️

除了压缩 HTTP 响应，我们还可以通过压缩和合并 JavaScript 和 CSS 文件来减少文件大小。有许多工具可以帮助我们完成这项任务，比如 UglifyJS、Terser、CSSNano 等。

例如，使用 Terser 来压缩 JavaScript 文件：

npx terser main.js -o main.min.js

使用 CSSNano 来压缩 CSS 文件：

npx cssnano style.css style.min.css

5. 使用懒加载技术 🚗

懒加载（Lazy Loading）是一种优化技术，它只在用户滚动到页面的某个部分时才加载相应的资源。这对于包含大量图片或视频的页面非常有用，可以显著减少初始加载时间。

你可以使用 <img> 标签的 loading="lazy" 属性来实现图片的懒加载：

<img src="image.jpg" loading="lazy" alt="Lazy-loaded image">

对于 JavaScript 和 CSS 文件，你可以使用 import() 动态导入模块，只在需要时加载它们。

---

结语 🎉

好了，今天的讲座就到这里啦！我们详细介绍了如何在 Express.js 中使用 compression 中间件来实现数据压缩，并探讨了如何通过一些额外的优化技巧来进一步提升应用的性能。希望这些内容对你有所帮助，让你的应用在性能上更上一层楼！

如果你有任何问题或建议，欢迎在评论区留言。下次见！👋

---

附录：常见问题解答 ❓

Q1: compression 支持哪些压缩算法？

compression 主要支持两种压缩算法：Gzip 和 Brotli。Gzip 是最常用的压缩算法，几乎所有现代浏览器都支持。Brotli 是一种更高效的压缩算法，通常比 Gzip 压缩得更好，但并不是所有浏览器都支持。compression 会根据客户端的 Accept-Encoding 头自动选择合适的压缩算法。

Q2: compression 会对所有响应进行压缩吗？

默认情况下，compression 只会对大于 1KB 的响应进行压缩。你可以通过设置 threshold 选项来自定义这个阈值。此外，compression 会根据客户端的 Accept-Encoding 头来决定是否压缩响应。如果客户端不支持压缩，compression 将不会对响应进行压缩。

Q3: 如何禁用 compression 对某些请求的压缩？

你可以通过 filter 选项来自定义是否对某个请求进行压缩。例如，你可以根据请求的 URL、内容类型等条件来决定是否压缩。详见前面的“自定义 filter 函数”部分。

Q4: compression 会影响性能吗？

虽然 compression 可以减少传输的数据量，但它也会增加服务器的 CPU 负载，因为压缩和解压都需要消耗计算资源。不过，对于大多数应用来说，压缩带来的带宽节省远远超过了 CPU 负载的增加。如果你担心性能问题，可以通过调整 level 和 memLevel 等选项来平衡压缩效果和性能。

Q5: compression 适用于所有类型的响应吗？

compression 主要适用于文本类型的响应（如 HTML、JSON、CSS、JavaScript 等），因为这些类型的文件通常可以通过压缩获得较大的收益。对于二进制文件（如图片、视频等），压缩的效果并不明显，甚至可能会增加 CPU 负载。因此，建议你根据实际情况选择性地对某些类型的响应进行压缩。