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

Posted 2022-08-23 凯小默

说明

玩转 webpack 学习笔记

图片压缩

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

使用：配置 image-webpack-loader

return 
    test: /\\.(png|svg|jpg|gif|blob)$/,
    use: [
        loader: 'file-loader',
        options: 
            name: `$filenameimg/[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
            
        
    ]
;

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

用法

我们添加下面配置

     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
                 
             
         
     ]
 ,

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

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

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

render() 
	return <div className="search-text">
	  <img src= girl  />
	</div>

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