Open hubvue opened 5 years ago
在实际项目中,最大的文件其实并不是代码文件,而是图片,那么在工程化中压缩图片便成为了一个必要的任务,webpack压缩图片社区也有比较成熟的方案。
使用最广泛的就是image-webpack-loader这个loader,先说一下这个loader的一些优点:
image-webpack-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 } } }, ], }]
可以看出这个组件可以使用不同的第三方插件对各种各样的图片进行压缩
pngquant
pngquant是一个png压缩器,通过将图片转换为具有alpha通道(通常比24/32位png文件小60-80%)的更高效的8位png格式,可显著减小文件大小
pngcrush
其主要目的是通过尝试不同的压缩级别和png过滤法来降低png IDATA数据流的大小
optipng
其设计灵感来自于pngcrush。optipng可将图片文件重新压缩为更小尺寸,而不会丢失任何信息。
tinypng
也是将24位png文件转化为更小有索引的8位图片,同时非必要的metadata也会被剥离掉。
在实际项目中,最大的文件其实并不是代码文件,而是图片,那么在工程化中压缩图片便成为了一个必要的任务,webpack压缩图片社区也有比较成熟的方案。
使用最广泛的就是
image-webpack-loader
这个loader,先说一下这个loader的一些优点:可以看出这个组件可以使用不同的第三方插件对各种各样的图片进行压缩
png图片压缩的原理
pngquant
pngquant是一个png压缩器,通过将图片转换为具有alpha通道(通常比24/32位png文件小60-80%)的更高效的8位png格式,可显著减小文件大小
pngcrush
其主要目的是通过尝试不同的压缩级别和png过滤法来降低png IDATA数据流的大小
optipng
其设计灵感来自于pngcrush。optipng可将图片文件重新压缩为更小尺寸,而不会丢失任何信息。
tinypng
也是将24位png文件转化为更小有索引的8位图片,同时非必要的metadata也会被剥离掉。