什么是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/ 表示启动了在线压缩。
静态加载
在线压缩
实践
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文件。
