vue3项目如何配置gzip压缩

首先下载插件：npm install vite-plugin-compression -D

在vite.config.js中引入： import viteCompression from 'vite-plugin-compression'

在plugins注册插件：plugins:[vue(),

 viteCompression({

      verbose: true, // 是否在控制台输出压缩结果

      disable: false, // 是否禁用

      threshold: 10240, // 压缩前最小文件大小

      algorithm: 'gzip', // 压缩算法

      ext: '.gz', // 文件类型

    }),

]

至此前端配置结束。

nginx中添加如下配置：

  server {
        listen       80;
        server_name  localhost;
       #gzip配置
           gzip on;
           gzip_types text/plain text/css application/json application/javascript;
           gzip_comp_level 6;
           gzip_min_length 1024;
           gzip_vary on;
      }

所有配置完成。在前端js文件的请求头中可以看到accept-encoding:gzip，代表成功开启