Vue CLI开启webpack打包gzip压缩和nginx进行gzip压缩

在webpack打包过程中开启gzip压缩，能够有效的压缩js、css、html文件，加快页面的加载速度。

我们只需要在vue.config.js文件中加入配置，就可以在打包过程中将相应的文件进行gzip压缩了。

configureWebpack: config => {
	config.plugins.push(new CompressionPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test:/\.js$|\.html$|.\css/, // 匹配文件名
        threshold: 10240, // 对超过10k的数据压缩
        minRatio: 0.8,	// 只有压缩好这个比率的资产才能被处理
        deleteOriginalAssets: true // 删除源文件
     }));
}

附：

属性	类型	默认	含义
test	{RegExp}	.	所有匹配此{RegExp}的资产都会被处理；
asset	{String}	path.gzquery	目标资产名称。文件被替换为原始资产。路径将替换为原始资产的路径并使用查询进行查询；
filename	{Function}	假	{功能}（资产）=>接收资产名称（处理资产选项后）并返回新资产名称的资产
algorithm	{String	Function}	gzip的
threshold	{Number}	0	只处理大于此大小的资产。以字节为单位
minRatio	{Number}	0.8	只有压缩好这个比率的资产才能被处理
deleteOriginalAssets	{Boolean}	假	是否删除原始资产

nginx也可以进行gzip压缩，只需要考虑实际情况配置一个就可以。

gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 2;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary off;
gzip_disable "MSIE [1-6]\.";