一文搞懂前端性能优化—Gzip压缩（Vue+Nginx项目，实时压缩与静态压缩双方案）

使用gzip压缩前端资源的体积是前端性能优化的手段之一

优化的基本逻辑：压缩包体积减少，前端资源加载变快。资源体积减少带来的效率提升>浏览器解压gzip的效率。

两套方案：实时压缩，静态压缩

Nginx中gizp相关配置

gzip on;  # 开启gzip
gzip_min_length 1k; # 启用压缩的最小文件大小
gzip_buffers 4 16k;  # 压缩缓冲区大小
gzip_http_version 1.0; # gzip http版本
gzip_comp_level 6; # 压缩级别1-9,越大压缩率越高,也越耗CPU
gzip_types application/javascript text/javascript text/css text/plain; # 压缩文件类型
gzip_vary on; # 在头部中添加Vary: Accept-Encoding（建议开启）
gzip_static on; #预压缩文件支持：当客户端请求文件时，Nginx 会优先查找并发送 .gz 后缀的预压缩文件，而不是实时压缩原始文件。

原始nginx配置，不开启任何gzip能力

worker_processes 1;
events {
    worker_connections 1024;
}
http {
    include mime.types;
    default_type application/octet-stream;
    sendfile on;
    keepalive_timeout 65;

    server {
        listen 8080;
        access_log /dev/null;
        error_log /dev/null;

        location ~ \.(gif|jpg|png|js|css|html|ico|woff2|woff|ttf)$ {
            root /app;
        }

        location / {
            root /app;
            index  index.html;
        }
    }
}

1.实时压缩

Nginx中添加10行到17行配置，即可开启实时压缩。

worker_processes 1;
events {
    worker_connections 1024;
}
http {
    include mime.types;
    default_type application/octet-stream;
    sendfile on;
    keepalive_timeout 65;
    # 添加以下配置开启gzip实时压缩
    gzip on;
    gzip_min_length 1k;
    gzip_buffers 4 16k;
    gzip_http_version 1.0;
    gzip_comp_level 6;
    gzip_types application/javascript text/javascript text/css text/plain;
    gzip_vary on;

    server {
        listen 8080;
        access_log /dev/null;
        error_log /dev/null;

        location ~ \.(gif|jpg|png|js|css|html|ico|woff2|woff|ttf)$ {
            root /app;
        }

        location / {
            root /app;
            index  index.html;
        }
    }

验证：

启动项目，访问127.0.0.1:8080

查看原始文件大小是69kb
配置gzip压缩后的大小变成27KB，并且观察响应头中有红框中两个属性，gzip配置成功。

补充：实时压缩会消耗一定cpu性能，根据实际情况配置gzip_comp_level的压缩程度

2.静态压缩

步骤：

一、安装Vite社区的插件vite-plugin-compression2

https://github.com/nonzzz/vite-plugin-compression

pnpm add vite-plugin-compression2 -D

二、Vue3项目引入插件

修改vite.config.js，导入compression插件，默认配置基本够用。（插件配置参数说明在文末）

import { defineConfig } from 'vite'

import { compression } from 'vite-plugin-compression2'

export default defineConfig({
  plugins: [
    // ...your plugin
    compression()
    // If you want to create a tarball archive you can import tarball plugin from this package and use
    // after compression.
  ]
})

三、打包

pnpm build

dist中多了.gz文件，并且压缩后大小显著减少

四、配置Nginx，添加第11行配置

worker_processes 1;
events {
  worker_connections 1024;
}
http {
  include mime.types;
  default_type application/octet-stream;
  sendfile on;
  keepalive_timeout 65;
  # 静态配置gzip
  gzip_static on;

  server {
    listen 8080;
    access_log /dev/null;
    error_log /dev/null;

    location ~ \.(gif|jpg|png|js|css|html|ico|woff2|woff|ttf)$ {
      root /app;
    }

    location / {
      root /app;
      index  index.html;
    }
  }
}

验证

直接观察请求的js文件大小，为压缩后的27.7kb，开启成功。Nginx抓取服务端预先打包好的gz文件响应给浏览器，节省了CPU实时压缩的损耗，但是包体积也会变大，因为原始和压缩文件会同时存在。

vite-plugin-compression2配置参数

参数	类型	默认值	说明
include	string , RegExp , Array<string 或 RegExp>	html,xml,css,json,js,mjs,svg,yaml,yml,toml	需要压缩的文件类型
exclude	string , RegExp , Array<string 或 RegExp>	-	排除哪些类型不压缩
threshold	number	0	大小超过这个值才会被压缩，单位bytes
algorithm	string , function	gzip	压缩算法，默认gzip
compressionOptions	Record<string,any>	{}	zlib包的配置，参考https://nodejs.cn/api/zlib.html
deleteOriginalAssets	boolean	false	是否删除原文件
skipIfLargerOrEqual	boolean	true	不处理大小大于等于原文件的
filename	string	[path][base].gz	压缩产物名称

3.源码实战

提供两个镜像文件，先解压到本地docker镜像。
docker镜像 提取码: x5gf

docker load -i gzip-vary.tar
docker load -i gzip-static.tar

gzip-vary.tar，实时压缩的源码

gzip-static.tar，静态压缩的源码

可以分别run起来，访问8080端口，观察资源的压缩情况。

docker run -d -p 8080:8080 --name gzip-varying gzip-vary
docker run -d -p 8080:8080 --name gzip-staticing gzip-static

前端资源 /app
Nginx配置路径 /etc/nginx/nginx.conf

Tip：假如有同学发现项目没开启Gzip但是依然有压缩效果，可以问问公司运维是不是在网关层Nginx中配置了。