webpack loader 使用之 image-webpack-loader

webpack 使用 image-webpack-loader, 我们可以对打包图片文件进行压缩。
原文描述 ：Minify PNG, JPEG, GIF, SVG and WEBP images with imagemin
内部使用 imagemin 库处理并压缩图片

//文件资源解析器(例如图片) + 图片压缩 (尽量使用cnpm)
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name].[hash:7].[ext]",
              outputPath: "img",
            },
          },
          {
            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
              },
            },
          },
        ],
      },

需要准备的

• file-loader 必须安装好
  npm install file-loader --save-dev
  相关配置：

 options: {
              name: "[name].[hash:7].[ext]", // 文件名-哈希7位-拓展名
              outputPath: "img", // 输出路径/img
            },

• 接着安装 image-webpack-loader
  npm install image-webpack-loader --save-dev

注意和可能踩坑的几个点

• 个人使用过程中尝试了 npm / yarn 安装发现不成功，依赖安装不完全

报错如下： error:cannot find module “imagemin-gifsicle”

尝试了安装 imagemin-gifsicle 未能解决问题。最后, 删除 package.json 的安装依赖, 使用 cnpm 安装,解决了问题。

• 插件的配置
  技术文档原文描述：

Comes bundled with the following optimizers, which are automatically enabled by default:
mozjpeg — Compress JPEG images
optipng — Compress PNG images
pngquant — Compress PNG images
svgo — Compress SVG images
gifsicle — Compress GIF images
意思是 以上的几个压缩是默认开启的 需要手动通过 enabled: false 去单独关闭不需要的插件。

测试结果

1.引入图片文件

/*  app.js  */
// 引入图片
import img from "../assets/img/sample.jpg";

const oImg = new Image();
oImg.src = img;
document.body.append(oImg);

2.打包对比（JPG 60%）

1. sample 图像 打包压缩前的原大小 430KB
   
2. sample 图像 打包压缩(60品质) 99KB
   
   体积减小为 1/4 , 在提升项目性能上还是蛮有效的。