vue3+vite开启gzip压缩以及Nginx配置gzip压缩

对vite + vue3 项目打包的时候进行 gzip 压缩

1. 安装 vite-plugin-compression 插件

npm install vite-plugin-compression

2. vite.config.ts/js 中导入vite-plugin-compression插件

import viteCompression from 'vite-plugin-compression'

3. 在 vite.config.ts/js 中的 plugins 中使用vite-plugin-compression插件即可

export default defineConfig({
	plugins: [
		viteCompression({
	      filter: /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i, // 需要压缩的文件
	      threshold: 1024, // 文件容量大于这个值进行压缩
	      algorithm: 'gzip', // 压缩方式
	      ext: 'gz', // 后缀名
	      deleteOriginFile: true, // 压缩后是否删除压缩源文件
    	})
	]
})

4. 保存改变后进行打包, 文件体积明显减少
   

Nginx配置gzip压缩

在nginx.conf中的http里面加入一下配置，开启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，**一定要开启,不开启读取不到.gz结尾的压缩文件**
    gzip_vary on;

一定要设置gzip_vary on；否则打包后的html引入的文件里面是以.js/.css结尾，而压缩文件又是以.js.gz/.css.gz结尾，会导致引入报错！！！