情景:当我们项目打包上线时,发现build后的包体积很大,最终导首屏加载速度慢。Gzip就是能非常明显有效的解决这个问题,它的原理是把原js、css文件进行压缩,从而减小文件体积,加快首屏访问速度
一、安装插件(compression-webpack-plugin)
npm install compression-webpack-plugin --save-dev
注意这个版本,如果版本过高npm run build的时候会报错如:
ValidationError: Compression Plugin Invalid Options
options should NOT have additional propertie
这时候需要降低此插件的版本即可,我项目中安装的版本为:
二、在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后还可以加载到原始资源文件)
})
]
}