什么是Gzip

Gzip是一种文件级别的数据压缩算法，用来减少文件大小，节省带宽从而提高网站的访问速度。它可以有效减少网络传输时间，这在大多数网站上可以大大提升用户体验，例如网站会更快地加载。Gzip是一种很好的优化技术。

两种使用Gzip压缩的姿势

一、构建时使用webpack或vite生成对应的.gz文件，浏览器请求xxx.js时，返回对应的xxx.js.gz。实操方法在文章最后。
二、浏览器访问xxx.js时，服务器对文件进行Gzip压缩后传输给浏览器。

前端预生成gz文件

关于第一种方法，除了前端需要预先生成.gz的压缩文件，还需要服务端进行一些配置，以Nginx为例，需要在nginx.conf中增加以下配置：

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    gzip_static on;
    server {
        listen       8462;
        server_name  localhost;
        location / {
            root   dist;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

gzip_static on; 开启这个属性就是静态加载本地的gz文件。

服务器在线Gzip压缩

前端无需进行配置，也不用预先生成.gz文件，服务器进行处理即可，以Nginx为例，需要在nginx.conf中增加以下配置：

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    # 开启gzip
    gzip  on;
     
    # 设置缓冲区大小
    gzip_buffers 4 16k;
     
    #压缩级别官网建议是6
    gzip_comp_level 6;
  
    #压缩的类型
    gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php;
    server {
        listen       8462;
        server_name  localhost;
        location / {
            root   dist;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

更详细的Gzip配置，可以查阅官方文档。

两种方案优缺点

一、前端借助构建工具，预先生成gz文件，缺点是构打包后构建的产物体积会变大，优点是不耗费服务器的性能。
二、使用nginx在线Gzip，缺点是需要实时压缩，会耗费服务器的性能，但是无需前端预先生成gz文件。

如何使用、区分两种方式

那么问题来了，如果想在有gz文件的时候进行静态压缩，不存在gz文件的时候进行在线压缩而不是加载源文件，要如何做呢？
答案就是两种配置都打开：

gzip on;
gzip_static on;
gzip_comp_level 2;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;  

gzip_static的优先级高，会先加载静态gz文件，当同目录下不存在此文件的时候，会执行在线压缩的命令。所以我们两个配置都开启即可

那么都开启的情况下，我们怎么区分使用了静态加载还是在线压缩呢？

响应头的Content-Edcoding:gzip表示Gzip压缩已经生效，而Etag中只有简单字符表示静态资源加载，而前面带 W/ 表示启动了在线压缩。

静态加载

image.png
在线压缩
image.png

实践

Vite打包生成gz文件

在Vite中使用vite-plugin-compression这个插件可以让你的Vite应用程序在发布前自动压缩 JavaScript 和 CSS 文件，大大减少文件大小，从而提高应用程序的性能。

首先，为你的项目安装 vite-plugin-compression

npm install --save-dev vite-plugin-compression

接下来，在 vite.config.js 中添加以下代码：

import { defineConfig } from 'vite'
import viteCompression from 'vite-plugin-compression'

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

最后，只需要在命令行中运行vite build命令即可，构建产物中就会出现对应的.gz文件。

Webpack打包生成gz文件

Webpack使用的插件叫做compression-webpack-plugin。

首先，安装插件：

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

接下来，在vue.config.js文件进行配置：

const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
        plugins: [
            new CompressionPlugin({
                algorithm: 'gzip', // 使用gzip压缩
                test: /\.js$|\.html$|\.css$/, // 匹配文件名
                filename: '[path].gz[query]', // 压缩后的文件名(保持原文件名，后缀加.gz)
                minRatio: 1, // 压缩率小于1才会压缩
                threshold: 10240, // 对超过10k的数据压缩
                deleteOriginalAssets: false, // 是否删除未压缩的源文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false（比如删除打包后的gz后还可以加载到原始资源文件）
            }),
        ],
    },
};

执行构建命令，即可输出对应的.gz文件。