当前位置：首页 > article >正文

JAVA：Spring Boot 3 实现 Gzip 压缩优化的技术指南

article 2024/11/28 19:10:10

1、简述

随着 Web 应用的用户量和数据量增加，网络带宽和页面加载速度逐渐成为瓶颈。为了减少数据传输量，提高用户体验，我们可以使用 Gzip 压缩 HTTP 响应。本文将介绍如何在 Spring Boot 3 中实现 Gzip 压缩优化。

在这里插入图片描述

2、配置

Spring Boot 3 对 Gzip 压缩提供了开箱即用的支持，我们可以通过简单配置来启用 Gzip 压缩。

2.1 添加依赖

在 Spring Boot 3 项目中，无需额外添加依赖，因为 Gzip 支持是内置的。只需配置即可。

2.2 配置 Gzip 压缩

通过修改 application.yml 或 application.properties 文件，可以轻松启用 Gzip 压缩。

application.yml 配置示例：

server:
  compression:
    enabled: true
    mime-types: text/html, text/xml, text/plain, text/css, text/javascript, application/javascript, application/json, application/xml
    min-response-size: 1024

application.properties 配置示例：

server.compression.enabled=true
server.compression.mime-types=text/html,text/xml,text/plain,text/css,text/javascript,application/javascript,application/json,application/xml
server.compression.min-response-size=1024

配置详解：

server.compression.enabled：启用或禁用 Gzip 压缩。设置为 true 以启用压缩。
server.compression.mime-types：定义哪些 MIME 类型的响应数据将被压缩。通常我们压缩 HTML、CSS、JavaScript、JSON 等类型的数据。
server.compression.min-response-size：设置压缩的最小响应大小（以字节为单位）。如果响应数据小于这个值，将不进行压缩。设置为 1024 表示只有响应大于 1KB 时才会进行压缩。

3、服务端应用

在 Spring Boot 3 中，启用 Gzip 压缩非常简单。以下是如何在后端服务中实现 Gzip 压缩以优化 API 响应数据的示例。假设有一个返回 JSON 数据的 API：

@RestController
public class DataController {

    @GetMapping("/data")
    public ResponseEntity<List<String>> getData() {
        List<String> data = List.of("Item 1", "Item 2", "Item 3", "Item 4", "Item 5");
        return ResponseEntity.ok(data);
    }
}

启用 Gzip 压缩后，当数据量较大时，这个 API 响应将被压缩以减少传输的数据量。

你可以使用 curl 来查看后端是否启用了 Gzip 压缩：

curl -H "Accept-Encoding: gzip" -I http://localhost:8080/data

你将会在响应头中看到类似的内容：

Content-Encoding: gzip

这表明 Gzip 压缩已经生效。

4、前端应用

在前端，Gzip 常用于压缩静态资源（如 HTML、CSS、JavaScript 文件），从而减少用户加载页面所需的时间。通常，这些静态资源通过 Web 服务器（如 Nginx 或 Apache）或打包工具（如 Webpack）进行 Gzip 压缩。

4.1 Nginx 配置静态资源的 Gzip 压缩

假设你在前端应用中使用 Nginx 作为静态资源服务器，你可以通过修改 Nginx 配置来启用 Gzip 压缩。Nginx 配置文件 (nginx.conf) 示例：

server {
    listen 80;
    server_name example.com;

    # 启用 gzip 压缩
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_min_length 1024;
    gzip_comp_level 5;

    location / {
        root /var/www/html;
        try_files $uri $uri/ =404;
    }
}

gzip on：启用 Gzip 压缩。
gzip_types：指定要压缩的 MIME 类型（HTML、CSS、JavaScript、JSON 等）。
gzip_min_length：仅压缩大于指定长度（1024 字节）的文件。
gzip_comp_level：压缩级别（1-9），数字越大压缩越强，但同时 CPU 资源消耗更多。

4.2 使用 Webpack 对前端文件进行 Gzip 压缩

如果你在前端开发中使用 Webpack 构建工具，你可以借助 compression-webpack-plugin 对生成的静态资源进行 Gzip 压缩。

安装插件：

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

修改 webpack.config.js：

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

module.exports = {
    entry: './src/index.js',
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js'
    },
    plugins: [
        new CompressionPlugin({
            filename: '[path].gz[query]',
            algorithm: 'gzip',
            test: /\.(js|css|html|svg)$/,
            threshold: 10240,
            minRatio: 0.8,
        }),
    ],
};

algorithm: ‘gzip’：使用 Gzip 算法。
test: /.(js|css|html|svg)$/：指定需要压缩的文件类型。
threshold: 10240：仅压缩大小超过 10KB 的文件。
minRatio: 0.8：压缩比最小值，只有压缩比小于 0.8 的文件才会被压缩。

运行 Webpack 构建后，静态资源将生成 Gzip 压缩版，服务器可以优先提供这些压缩后的文件给浏览器，减少加载时间。

5、性能提升

使用 Gzip 压缩后，响应数据量可以显著减少，尤其是在数据量较大的情况下，性能提升尤为明显。以下是一些优化结果的示例：

压缩前：原始 JSON 响应大小为 120KB。
压缩后：启用 Gzip 压缩后，响应数据大小减少到 30KB。
通过减少传输数据的大小，应用的响应速度大幅提升，带宽消耗减少。

注意事项

CPU 开销：虽然 Gzip 压缩可以减少传输数据大小，但压缩和解压缩过程会消耗一定的 CPU 资源。如果你的应用对 CPU 敏感，建议合理设置 min-response-size 以避免对小文件进行压缩。
静态资源：对于静态资源（如 CSS 和 JavaScript 文件），如果你使用了 Nginx 或其他代理服务器，建议在代理层进行 Gzip 压缩，而不是在 Spring Boot 中处理。