Vite优化之gz压缩

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天，点击查看活动详情

为什么？

目的就是把服务端响应的文件的体积尽量减小，优化返回速度

为什么压缩放在客户端？

既然服务端都可以做压缩，为什么在 vite 打包应用时还要多此一举呢？我们可以看下 nginx 配置中 gzip_comp_level 这个配置项

gzip_comp_level 5;

数字越大压缩效果越好，但是会耗费更多的CPU和时间，我们压缩文件主要是为了减少传输时间，如果每次请求静态资源服务端都要压缩很久才会返回信息，不仅本末倒置吗？况且服务器开销也会增大很多。既然现在的 spa 应用文件都是打包生成的，我们在打包的时候就直接生成高压缩等级的文件，作为静态资源放在服务器上，接收到请求后直接把这些压缩版文件返回回去不就好了

http传输gzip原理

客户端(浏览器)在请求静态资源(js、css等)的时候，在请求头 Request Header 里带上 accept-encoding字段来表明接受哪些压缩方法， 如accept-encoding: gzip, deflate；服务端在接收到请求时如果发现有这个配置，则发送gzip压缩版本的文件，并在响应头 Response Headers 配置一个 content-encoding 字段，用于说明服务端数据的压缩方法(可选值是gzip、compress、deflate)，否则(没有accept-encoding)就发送源文件；客户端再根据返回响应头里 content-encoding 对应的格式去做相应的解码/解压缩；没有content-encoding项则不进行解压缩。
accept-encoding和content-encoding字段都非常语义化，就是传输的文件以怎样的格式编码/解码，所以当响应头有content-encoding: gzip出现，就能说明我们服务端的gzip压缩成功开启了

安装插件

yarn add vite-plugin-compression -D

引入以及使用

import viteCompression from 'vite-plugin-compression'

plugins: [vue(),viteCompression()],

效果

nginx 配置开启

 server {
        listen       8080;
        server_name  localhost;
        #gzip
        #开启gzip功能
        gzip on; 
        #开启gzip静态压缩功能
        gzip_static on; 
        #gzip缓存大小
        gzip_buffers 4 16k;
        #gzip http版本
        gzip_http_version 1.1;
        #gzip 压缩级别 1-10 
        gzip_comp_level 5;
        #gzip 压缩类型
        gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
        # 是否在http header中添加Vary: Accept-Encoding，建议开启
        gzip_vary on;
    }