【减小图片打包体积】image-webpack-loader

场景：登录页背景图片体积过大，加载慢，影响用户体验。

一、【效果对比】

压缩前：

压缩后：

二、实现步骤

1、安装image-webpack-loader

npm install image-webpack-loader

2、添加webpack的loader配置，和plugin配置同级

module:{
      rules:[
        {
          test: /\.(gif|png|jpe?g|svg)$/i,
          use:[{
            loader:'image-webpack-loader',
            options:{
              mozjpeg: {
                progressive: true, 
                quality: 60, // JPG 输出的质量 一般60为可接受的
              },
              optipng: {
                enabled: true,
              },
              pngquant: {
                quality: [0.5, 0.65], // PNG 质量范围
                speed: 4,
              },
              gifsicle: {
                interlaced: false,// 优化GIF
              },
              webp: {
                quality: 75, // 转换为 webp
              },
            }
          }]
        }
      ]
    }

3、打包

npm run build:prod

期间报错，说是没有imagemin-mozjpeg这个moudle。（这一步看请情况，也许你不报这个错，根据报错去解决，少哪个包就安哪个包）

4、安装imagemin-mozjpeg

npm install imagemin-mozjpeg

5、再次打包，npm run build:prod

打开dist/static/img，找到对应图片，发现图片被成功压缩啦