vue项目打包开启Gzip压缩

vue项目打包开启Gzip压缩

vue-cli步骤

1. 安装npm i compression-webpack-plugin -D 提供带 Content-Encoding 编码的压缩版的资源 webpack地址
2. 使用—在vue.config.js文件中

const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {
    configureWebpack: {
        plugins: [
            new CompressionPlugin({
                test: /\.js$|\.html$|\.css/,
                threshold: 10240 // 只处理比这个值大的资源。按字节计算 设置的是 10kb
            })
        ]
    }
}

3. 运行npm run build即可

vite步骤

安装依赖vite-plugin-compression

yarn add vite-plugin-compression -D

vite.config.js配置文件修改

import viteCompression from "vite-plugin-compression"
export default defineConfig(()=> {
	return {

		plugins: [
		...
		viteCompression({
	        ext: ".gz",
	        deleteOriginFile: false
	     })
	     ...
      ]
	}
})

Nginx步骤

1. 在nginx的安装目录中找到conf-> nginx.conf文件
2. 打开 在http中添加如下代码

http {
    ...
    #开启gzip
	gzip  on;  
	#低于1kb的资源不压缩 
	gzip_min_length 1k;
	#压缩级别1-9，越大压缩率越高，同时消耗cpu资源也越多，建议设置在5左右。 
	gzip_comp_level 5; 
	#需要压缩哪些响应类型的资源，多个空格隔开。不建议压缩图片.
	gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;  
	#配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
	gzip_disable "MSIE [1-6]\.";  
	#是否添加“Vary: Accept-Encoding”响应头
	gzip_vary on;
    
    ...
    server {
        ...
    }
    ...
}

直接复制即可

#开启gzip
gzip  on;  
#低于1kb的资源不压缩 
gzip_min_length 1k;
#压缩级别1-9，越大压缩率越高，同时消耗cpu资源也越多，建议设置在5左右。 
gzip_comp_level 5; 
#需要压缩哪些响应类型的资源，多个空格隔开。不建议压缩图片.
gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;  
#配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
gzip_disable "MSIE [1-6]\.";  
#是否添加“Vary: Accept-Encoding”响应头
gzip_vary on;

判断是否开启

1. npm run build之后可以看到打包的代码大小

   

2. 打开浏览器的 控制台F12，选中network，在标红的地方鼠标右键
   

3. 选中Response Headers —> Content-Encoding
   

4. 可以看到gzip说明已经开启
   

5. 鼠标悬停看这个文件的大小和npm run build之后打包的，显示gzipped是否相近，并且提示XXKB transferred over network,resource size :XXKB