Webpack：图片压缩及其原理

在实际项目中，最大的文件其实并不是代码文件，而是图片，那么在工程化中压缩图片便成为了一个必要的任务，webpack压缩图片社区也有比较成熟的方案。

使用最广泛的就是image-webpack-loader这个loader，先说一下这个loader的一些优点：

可以设置很多个定制选项
引入了更多的第三方插件
可以处理多种图片

rules: [{
  test: /\.(gif|png|jpe?g|svg)$/i,
  use: [
    'file-loader',
    {
      loader: 'image-webpack-loader',
      options: {
        mozjpeg: {
          progressive: true,
          quality: 65
        },
        // optipng.enabled: false will disable optipng
        optipng: {
          enabled: false,
        },
        pngquant: {
          quality: [0.65, 0.90],
          speed: 4
        },
        gifsicle: {
          interlaced: false,
        },
        // the webp option will enable WEBP
        webp: {
          quality: 75
        }
      }
    },
  ],
}]

可以看出这个组件可以使用不同的第三方插件对各种各样的图片进行压缩

png图片压缩的原理

pngquant

pngquant是一个png压缩器，通过将图片转换为具有alpha通道(通常比24/32位png文件小60-80%)的更高效的8位png格式，可显著减小文件大小

pngcrush

其主要目的是通过尝试不同的压缩级别和png过滤法来降低png IDATA数据流的大小

optipng

其设计灵感来自于pngcrush。optipng可将图片文件重新压缩为更小尺寸，而不会丢失任何信息。

tinypng

也是将24位png文件转化为更小有索引的8位图片，同时非必要的metadata也会被剥离掉。

hubvue / webpack-learn

Webpack：图片压缩及其原理 #17

png图片压缩的原理