vue3 vite和nginx服务器开启 gzip_vue3 gzip

1、首先前端项目里安装  vite-plugin-compression  插件

yarn add vite-plugin-compression

2、在 vite.config.js 中

import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
import compressPlugin from 'vite-plugin-compression'
 
export default defineConfig({
  plugins: [
    vue(),
    compressPlugin({
      threshold: 3072, //3KB 仅压缩文件大小大于此阈值的文件
      deleteOriginFile: false, // 是否删除原始文件
    }),
  ]
})

打开打包的文件可以看到

 .gz文件，前端要做的已经完成了

3、配置服务器中nginx

http {
    # gzip config
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 6;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php;
    gzip_vary on;
}

在http中写入gzip配置。

打包文件上传服务器后重启nginx

4、打开浏览器控制台

如果看到这两个属性都有，那么你已经配置gzip成功了

必须要有压缩好的文件，这样可以大量减少服务器压力

问了一下gpt 回答是错误的

5、试了一下，如果不先压缩，那么就没有gzip效果