【打包优化】vite+vue3+ts项目搭配nginx开启gzip压缩

记录一下最近使用 vite2.0 + vue3.0 + ts 的项目gzip压缩打包优化。项目使用nginx做代理。

gzip压缩分两种：

1、 一种是前端直接打包，nginx直接拿压缩后的文件返回给浏览器，浏览器拿到压缩文件后，会自动解压，这种也可以叫nginx静态压缩。

2、 另外一种是nginx动态压缩，nginx拿到资源后，直接压缩，再返回给浏览器，这种方式比较消耗nginx的CPU。

方法1：前端开启gzip

这里参考了 vue-vben-admin 项目，使用了 vite-plugin-compression 插件做压缩，附上配置

// vite.config.ts 文件
import type { UserConfig, ConfigEnv } from 'vite';

// gzip压缩，建议抽离成一个单独的ts文件，这里为了方便直接贴在vite.config.ts文件里
import type { Plugin } from 'vite';
import compressPlugin from 'vite-plugin-compression';

function configCompressPlugin(
  compress: 'gzip' | 'brotli' | 'none',
  deleteOriginFile = false
): Plugin | Plugin[] {
  const compressList = compress.split(',');

  const plugins: Plugin[] = [];

  if (compressList.includes('gzip')) {
    plugins.push(
      compressPlugin({
        ext: '.gz',
        threshold: 1024,
        deleteOriginFile,
      })
    );
  }

  if (compressList.includes('brotli')) {
    plugins.push(
      compressPlugin({
        ext: '.br',
        algorithm: 'brotliCompress',
        threshold: 1024,
        deleteOriginFile,
      })
    );
  }
  return plugins;
}


export default ({ command, mode }: ConfigEnv): UserConfig => {
    return {
        plugins: configCompressPlugin
    }
}

另外还要配置一下nginx服务器，也就是开启nginx静态压缩

// nginx.conf 文件
server {
  gzip on;
  gzip_static on;
}

配置完后，可以看到请求response headers里的Content-Encoding:gzip字段

Content-Encoding: gzip
Content-Type: application/javascript
ETag: "61caffd3-3131"

方法2：nginx动态压缩

nginx服务器配置

// nginx.conf 文件
server {
  gzip on; # 开启gzip
  gzip_min_length 1k; # 设置允许压缩的页面最小字节数
  gzip_buffers 4 16k; # 设置用于处理请求压缩的缓冲区数量和大小
  gzip_http_version 1.0; # 压缩版本
  gzip_comp_level 2; # 设置压缩比率，0-9，比率越低，处理速度快，传输速度慢
  gzip_types text/plain application/javascript text/css application/xml; # 设置压缩类型
  gzip_vary on; # 开启后，如果response headers里有Accept-Encoding:gzip，表示浏览器支持gzip压缩
}

配置完后，可以看到请求response headers里的Content-Encoding:gzip字段，Etag字段会有 W/ 前缀

Content-Encoding: gzip
Content-Type: application/javascript
ETag: W/"51c1ffd3-3245"

另外据说nginx静态、动态压缩结合使用，效果更好(这个本人没验证过)。最后我是结合使用的，前端vite压缩配置还是按方法1进行，就是改了一下nginx配置

// nginx.conf 文件
server {
  gzip_static on;
  gzip_proxied expired no-cache no-store private auth;
  gzip on; 
  gzip_min_length 1k;
  gzip_buffers 4 16k;
  gzip_http_version 1.0;
  gzip_comp_level 2;
  gzip_types text/plain application/javascript text/css application/xml;
  gzip_vary on;
}