前端gizp压缩配置

！！！目前项目用到的是 vue 和 nginx 简单阐述 用到其他的会进行补充

打包的时候开启gzip可以很大程度减少包的大小，非常适合于上线部署。更小的体积对于用户体验来说
就意味着更快的加载速度以及更好的用户体验。

1. 安装依赖：compression-webpack-plugin

npm install --save-dev compression-webpack-plugin

高版本可能会有不兼容问题(目前用的是6.11版本)

npm uninstall --save-dev compression-webpack-plugin
npm install --save-dev compression-webpack-plugin@6.1.1

2. vue.config.js配置

const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
	configureWebpack: {
	    plugins: [
	      new CompressionPlugin({
	        algorithm: 'gzip', // 使用gzip压缩
	        test: /\.js$|\.html$|\.css$/, // 匹配文件名
	        filename: '[path][base].gz', // 压缩后的文件名(保持原文件名，后缀加.gz)
	        minRatio: 1, // 压缩率小于1才会压缩
	        threshold: 10240, // 对超过10k的数据压缩
	        deleteOriginalAssets: false, // 是否删除未压缩的源文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false（比如删除打包后的gz后还可以加载到原始资源文件）
	      })
	    ]
	}
}

3. nginx配置

# 开启和关闭gzip模式
	gzip on;
	# gizp压缩起点，文件大于1k才进行压缩
	gzip_min_length 1k;
	# 设置压缩所需要的缓冲区大小，以4k为单位，如果文件为7k则申请2*4k的缓冲区 
	gzip_buffers 4 16k;
	# 设置gzip压缩针对的HTTP协议版本
	gzip_http_version 1.1;
	# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
	gzip_comp_level 5;
	# 需要压缩的文件mime类型
	gzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml;
	# 是否在http header中添加Vary: Accept-Encoding，建议开启
	gzip_vary on;
	# nginx做前端代理时启用该选项，表示无论后端服务器的headers头返回什么信息，都无条件启用压缩
	gzip_proxied expired no-cache no-store private auth;
	# 不启用压缩的条件，IE6对Gzip不友好，所以不压缩
	gzip_disable "MSIE [1-6]\.";