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

【Nginx】前端项目开启 Gzip 压缩大幅提高页面加载速度

article 2024/12/25 2:13:22

背景

Gzip 是一种文件压缩算法，减少文件大小，节省带宽从而提减少网络传输时间，网站会更快更丝滑。

// nginx
root@hcss-ecs-1d22:/etc/nginx# nginx -v
nginx version: nginx/1.24.0

// node
ndde v18.20.1

// dependencies
"vue": "^3.2.45",

// devDependencies
"vite": "^5.0.0",
"vite-plugin-compression": "^0.5.1"

`Gzip` 工作原理

浏览器请求url，在请求头中设置属性 accept-encoding：gzip, deflate。表明浏览器支持 gzip，这个参数是浏览器自动会携带的请求头信息。
服务器收到浏览器发送的请求之后，服务器会返回压缩后的文件，并在响应头中包含 content-encoding: gzip；如果没有压缩文件，返回未压缩的请求文件。
浏览器接收到到服务器的响应，根据 content-encoding: gzip 响应头使用 gzip 策略去解压压缩后的资源，通过 content-type 内容类型决定怎么编码读取该文件内容。

使用 `Gzip` 压缩主要的两种姿势

动态压缩: 通过 nginx + gzip 来进行在线上实时压缩代码（前端不做额外处理）。

静态压缩：打包构建使用webpack / vite 预先生成对应的 .gz 文件，让 nginx 直接使用已经压缩好的 .gz 文件。

动态压缩

动态压其实就是服务端进行压缩，就是通过 nginx + gzip 来进行在线上压缩！
gzip 它是一个 ngxin 的一个内置功能模块。
就是需要去开启 gzip 相关配置， nginx 就可以去做相应的在线压缩处理
缺点: 对服务端CPU 要求会比较高，为了减少不可控制的因素，还是建议采用静态压缩的方式

nginx http 块中配置如下：

gzip on;
gzip_disable   "MSIE [1-6]\.";
gzip_min_length  1k;
gzip_buffers     4 16k;
gzip_http_version 1.1;
gzip_comp_level 4;
gzip_types     text/plain application/javascript application/x-javascript text/javascript text/cssapplication/xml application/xml+rss;
gzip_vary on;
gzip_proxied   expired no-cache no-store private auth;

静态压缩

在本地项目中配置 vite-plugin-compression 插件，打包生成 .gz文件。
不用过于在意 cup 的负载，与峰值。
但是需要在 ngxin 配置一个 gzip_static 静态压缩模块。

nginx http 块中配置

gzip_static on;

本地安装 vite-plugin-compression打包插件

npm i -D vite-plugin-compression

vite.config.js 中配置：

import viteCompression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
     viteCompression({
      // //压缩算法，可选['gzip’,'brotlicompress’....]
      algorithm: 'gzip',
      //大于·10kb·的文件压缩，默认为·10240
      threshold: 10240,
      //是否在控制台中输出压缩结果,线上最好设置为false
      verbose: true,
      // 压缩后是否删除源文件
      // deleteOriginFile: true
    })
  ]
})