vue项目首屏加载优化--gzip

情景：当我们项目打包上线时，发现build后的包体积很大，最终导首屏加载速度慢。Gzip就是能非常明显有效的解决这个问题，它的原理是把原js、css文件进行压缩，从而减小文件体积，加快首屏访问速度

一、安装插件（compression-webpack-plugin）

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

注意这个版本，如果版本过高npm run build的时候会报错如：

ValidationError: Compression Plugin Invalid Options
options should NOT have additional propertie
1
2

这时候需要降低此插件的版本即可，我项目中安装的版本为：

二、在vue.config.js中进行配置：

const CompressionPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
configureWebpack:{
plugins:[
	new CompressionPlugin:({
		test:productionGzipExtensions ,// 匹配文件名
		threshold:1024,	// 对超过10k的数据压缩
		minRatio: 1, // 压缩率小于1才会压缩
		deleteOriginalAssets: false // 是否删除未压缩的源文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false（比如删除打包后的gz后还可以加载到原始资源文件）
	})
]
}
1
2
3
4
5
6
7
8
9
10
11
12