image-webpack-loader
1.下载image-webpack-loader
npm install --save-dev image-webpack-loader
2.在vue.config.js中修改相关配置
4M的图片使用默认设置压缩成1.4M，自定义的设置可以更小
module.exports = {
...
// 默认设置
const defaultOptions = {
bypassOnDebug: true
}
// 自定义设置
const customOptions = {
mozjpeg: {
progressive: true,
quality: 50
},
optipng: {
enabled: true,
},
pngquant: {
quality: [0.5, 0.65],
speed: 4
},
gifsicle: {
interlaced: false,
},
// 不支持WEBP就不要写这一项
webp: {
quality: 75
}
}
chainWebpack: config => {
...
config.module.rule('images')
.test(/\.(gif|png|jpe?g|svg)$/i)
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options(customOptions)
.end()
...
}
}
