gzip压缩：让你的网页加载飞起来！(10)

Gzip 是一种广泛使用的文件压缩算法，它可以显著减少文件的体积，从而提高传输效率。在 B/S 结构（Browser/Server 结构）中，Gzip 压缩可以显著提升网页的加载速度，尤其是在传输大量静态资源时。

1. B/S 结构中的压缩传输

在 B/S 结构中，服务器可以将响应内容压缩后再发送给客户端，客户端接收到压缩后的数据后进行解压。这种机制可以显著减少传输时间，提高用户体验。

优点

• 传输效率提升：压缩后的文件体积更小，传输时间更短。
• 带宽节省：减少了网络带宽的占用，对于带宽有限的用户尤其重要。

缺点

• 服务器压缩时间：服务器需要时间来压缩响应内容。
• 客户端解压时间：客户端需要时间来解压接收到的数据。

2. 使用 Webpack 进行预压缩

为了移除服务器的压缩时间，可以使用 compression-webpack-plugin 插件对打包结果进行预压缩。这样，服务器可以直接提供压缩后的文件，无需在每次请求时进行压缩。

2.1 安装 compression-webpack-plugin

首先，安装 compression-webpack-plugin 插件：

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

2.2 配置 Webpack

在 webpack.config.js 中配置 compression-webpack-plugin：

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

module.exports = {
  // 其他配置...
  plugins: [
    new CompressionWebpackPlugin({
      algorithm: 'gzip', // 压缩算法
      test: /\.js$|\.css$|\.html$/, // 匹配需要压缩的文件类型
      threshold: 10240, // 只有大小大于该值的资源会被压缩 (10 KB)
      minRatio: 0.8, // 压缩率小于阈值的资源不会被压缩
      deleteOriginalAssets: false, // 是否删除原文件
    }),
  ],
};

2.3 配置说明

• algorithm：压缩算法，常用的有 gzip 和 brotli。
• test：匹配需要压缩的文件类型。
• threshold：只有大小大于该值的资源会被压缩。
• minRatio：压缩率小于阈值的资源不会被压缩。
• deleteOriginalAssets：是否删除原文件。

3. 服务器配置

即使使用了 compression-webpack-plugin 进行预压缩，服务器也需要配置以支持提供压缩后的文件。以下是一些常见服务器的配置示例：

3.1 Nginx

在 Nginx 配置文件中添加以下内容：

server {
  listen 80;
  server_name yourdomain.com;

  location / {
    root /path/to/your/static/files;
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
  }
}

3.2 Apache

在 Apache 配置文件中添加以下内容：

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript application/javascript
</IfModule>

3.3 Express

在 Express 应用中使用 compression 中间件：

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

const app = express();

app.use(compression());

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

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

4. 总结

通过使用 compression-webpack-plugin 对打包结果进行预压缩，可以显著减少服务器的压缩时间，提高传输效率。🌟