vue-cli3 图片压缩【image-webpack-loader】使用

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() 
  ...
  }
}