webpack优化篇（四十九）：使用 webpack 进行图片压缩

说明

玩转 webpack 学习笔记

图片压缩

要求：基于 Node 库的 imagemin 或者 tinypng API

使用：配置 image-webpack-loader

return {
    test: /\.(png|svg|jpg|gif|blob)$/,
    use: [{
        loader: 'file-loader',
        options: {
            name: `${filename}img/[name]${hash}.[ext]`
        }
    }, {
        loader: 'image-webpack-loader',
        options: {
            mozjpeg: {
                progressive: true,
                quality: 65
            },
            optipng: {
                enabled: false,
            },
            pngquant: {
                quality: '65-90',
                speed: 4
            },
            gifsicle: {
                interlaced: false,
            },
            webp: {
                quality: 75
            }
        }
    }]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

Imagemin 的优点分析

• 有很多定制选项
• 可以引入更多第三方优化插件，例如：pngquant
• 可以处理多种图片格式

Imagemin 的压缩原理

• pngquant：是一款 PNG 压缩器，通过将图像转换为具有 alpha 通道（通常比 24/32 位 PNG 文件小60-80％）的更高效的 8 位 PNG 格式，可显著减小文件大小。
• pngcrush：其主要目的是通过尝试不同的压缩级别和 PNG 过滤方法来降低 PNG IDAT 数据流的大小。
• optipng：其设计灵感来自于 pngcrush。optipng 可将图像文件重新压缩为更小尺寸，而不会丢失任何信息。
• tinypng：也是将 24 位 png 文件转化为更小有索引的 8 位图片，同时所有非必要的 metadata 也会被剥离掉

实战使用 Imagemin

https://github.com/tcoopman/image-webpack-loader

安装依赖：这里使用 5.0.0 版本的

npm install image-webpack-loader@5.0.0 --save-dev
1

用法

我们添加下面配置

{
     test: /.(png|jpg|gif|jpeg)$/,
     use: [
         {
             loader: 'file-loader',
             options: {
                 name: '[name]_[hash:8].[ext]'
             }
         },
         {
             loader: 'image-webpack-loader',
             options: {
                 mozjpeg: {
                     progressive: true,
                     quality: 65
                 },
                 // optipng.enabled: false will disable optipng
                 optipng: {
                     enabled: false,
                 },
                 pngquant: {
                     quality: '65-90',
                     speed: 4
                 },
                 gifsicle: {
                     interlaced: false,
                 },
                 // the webp option will enable WEBP
                 webp: {
                     quality: 75
                 }
             }
         }
     ]
 },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

配置完之后，我们去 https://unsplash.com/ 网站下载一张图片，这个网站的图片没有版权问题。

下载下来，我们添加到项目里面使用它，它有 2.17 M。

import girl from './images/girl.jpg';

render() {
	return <div className="search-text">
	  <img src={ girl } />
	</div>
}
1
2
3
4
5
6
7

下面运行打包命令，可以看到效果还是很明显的，只有 1.0.9 M 了。