d借助image-webpack-loader插件，可以在build项目的时候将指定类型的图片文件进行压缩，以提升页面响应速度，使用方法如下：
下载image-webpack-loader
npm install --save-dev image-webpack-loader
在vue.config.js中修改相关配置
module.exports = {
chainWebpack: (config) => {
......
const customOptions = {
mozjpeg: {progressive: true, quality: 50},
optipng: {enabled: true,},
pngquant: {quality: [0.5, 0.65], speed: 4},
gifsicle: {interlaced: false,},
webp: {quality: 75}
}
config
.module.rule('images')
.test(/\.(gif|png|jpe?g|svg)$/i)
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options(customOptions)
.end()
......
}
};
注意：较大的图片文件会导致打包过程缓慢
Loader配置项:
bypassOnDebug (all)
Type: boolean Default: false
该配置项目为true时，在debug模式下将不会对文件进行处理，loader将充当常规file-loader的角色。在开发或使用dev-server时，借此来提升初始化速度，加速后续编译；在编译项目时，输出压缩后的文件。
disable
Type: boolean Default false
与 bypassOnDebug 选项功能相同，但不依赖于 webpack 调试模式，该模式在 2.x 中已弃用。 基本上，如果您正在运行 webpack@2.x 或更新版本，则您想使用此选项。