vue打包添加gzip配置项

安装 compression-webpack-plugin
这边我选用的是6.1.1版本

	npm install compression-webpack-plugin@6.1.1
	或者
	yarn add compression-webpack-plugin@6.1.1

之后在vue.config.js中添加配置项

	const CompressionPlugin = require('compression-webpack-plugin')

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

关于我写这篇博客的原因

之前也找了很多博客，想学习一下如何添加gzip压缩，结果找到的所有配置都无法使用，无奈之下只能前往npm网站寻找文档

最后的结果：发现他们的文章，在 filename 这一项，使用的都是filename: “[path].gz[query]”；而我在npm找到的文档表明，应该使用filename:"[path][base].gz"

想说的就这么多，谢谢大家的查看

转发请标明出处，谢谢！