前端优化：Gzip 压缩能干点啥？

什么是 Gzip

Gzip 是一种用于压缩文件的文件格式和压缩算法。它可以将文件以更小的尺寸存储，并在需要时进行解压缩以恢复原始文件。通常用于在网络传输中减少文件的大小，从而提高传输速度和节省带宽。它也常用于压缩静态文件，例如网页、脚本和样式表，以加快网页加载速度。其使用 DEFLATE 压缩算法，该算法使用哈夫曼编码和字典压缩技术来减小文件的大小。

使用 Gzip 的两种方式

静态压缩

前端借助构建工具在打包时生成 .gz 文件。

👍 优点：不耗费服务器性能

👎 缺点：打包后的产物体积变大，占用服务器空间

实时压缩

使用 nginx 在线 Gzip 。

👍 优点：不用提前生成 .gz 文件，节省服务器空间

👎 缺点：需要实时压缩会耗费服务器性能

如何使用？

静态压缩

nginx 配置如下：

# 静态压缩
gzip_static on;

开启成功之后，请求资源的响应头应包含以下内容

Content-Encoding:gzip
ETag: W/"********"

实时压缩

nginx 配置如下：

# 开启压缩
gzip on; 

# 设置缓冲区大小
gzip_buffers 4 16k;

# 压缩级别官网建议是6
gzip_comp_level 6;

# 压缩文件类型
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;

开启成功之后，请求资源的响应头应包含以下内容

Content-Encoding:gzip
ETag: "********"

同时使用

当站点有 .gz 文件时进行静态压缩，不存在 .gz 文件进行实时压缩而不是加载源文件。nginx 配置如下：

# 开启压缩
gzip on; 

# 静态压缩
gzip_static on; 

# 设置缓冲区大小
gzip_buffers 4 16k;

# 压缩级别官网建议是6
gzip_comp_level 6;

# 压缩文件类型
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;

.gz 文件的生成

Vite 中使用 vite-plugin-compression 插件

GitHub - vbenjs/vite-plugin-compression: Use gzip or brotli to compress resources

pnpm i vite-plugin-compression -D

import viteCompression from 'vite-plugin-compression';

export default defineConfig({
	plugins: [viteCompression()]
});

Webpack 中使用 compression-webpack-plugin

GitHub - webpack-contrib/compression-webpack-plugin: Prepare compressed versions of assets to serve them with Content-Encoding

pnpm i compression-webpack-plugin -D

const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
  plugins: [
	  new CompressionPlugin({
      algorithm: 'gzip',
      test: /\.js$|\.html$|\.css$/,
      filename: '[path].gz[query]',
      minRatio: 1,
      threshold: 10240,
      deleteOriginalAssets: false,
	  }),
	],
};