背景
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·的文件压缩，默认为·10240threshold: 10240,//是否在控制台中输出压缩结果,线上最好设置为falseverbose: true,// 压缩后是否删除源文件// deleteOriginFile: true})]
})
验证
