图片压缩插件：image-webpack-loader
安装：cnpm install --save-dev image-webpack-loader
npm地址：https://www.npmjs.com/package/image-webpack-loader

vue-cli4的默认图片处理配置：

   webpackConfig.module
      .rule('images')
        .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
        .use('url-loader')
          .loader(require.resolve('url-loader'))
          .options(genUrlLoaderOptions('img'))

很多人直接这样在vue.config.js里面加image-webpack-loader 配置，如下：

chainWebpack(webpackConfig) {
    // 压缩图片
    webpackConfig.module
      .rule('images')
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({ bypassOnDebug: true })
      .end()
}

vue-clie4的vue.config.js下的image-webpack-loader更详细的配置

如下：

if (isProd) {
      // 图片压缩
      webpackConfig.module
        .rule('images')
        .use('image-webpack-loader')
        .loader('image-webpack-loader')
        .options({
          mozjpeg: {
            progressive: true,
            quality: 50
          },
          optipng: {
            enabled: true,
          },
          pngquant: {
            quality: [0.5, 0.65],
            speed: 4
          },
          gifsicle: {
            interlaced: false,
          },
          // 不支持WEBP就不要写这一项
          webp: {
            quality: 75
          }
        })
        .end()
    }

亲自测试过，可以把6.68k的图片压成2.11k。成功压缩图片。

特别注意：

file-loader结合 image-webpack-loader插件使用，会导致base64的图片无法正常显示，这个情况下，只能去除file-loader插件对base64图片的转换。所以只压缩图片的正确做法如下：

if (isProd) {
      // 图片压缩
      webpackConfig.module
        .rule('images')
        .test(/\.(gif|png|jpe?g|svg)$/i)
        .use('image-webpack-loader')
        .loader('image-webpack-loader')
        .options({
          mozjpeg: {
            progressive: true,
            quality: 50
          },
          optipng: {
            enabled: true,
          },
          pngquant: {
            quality: [0.5, 0.65],
            speed: 4
          },
          gifsicle: {
            interlaced: false,
          },
          // 不支持WEBP就不要写这一项
          webp: {
            quality: 75
          }
        })
        .end()
    }

如果对您有帮助，请点个赞，谢谢。