嗯，手搓一个TinyPng压缩图片的WebpackPlugin也SoEasy啦

作者：JowayYoung
仓库：Github、CodePen
博客：掘金、思否、知乎、简书、头条、CSDN
公众号：IQ前端
联系我：关注公众号后有我的微信哟
特别声明：原创不易，未经授权不得对此文章进行转载或抄袭，否则按侵权处理，如需转载或开通公众号白名单可联系我，希望各位尊重原创的知识产权

前言

曾经发表过一篇性能优化的文章《前端性能优化指南》，笔者总结了一些在项目开发过程中使用过的性能优化经验。说句真话，性能优化可能在面试过程中会有用，实际在项目开发过程中可能没几个同学会注意这些性能优化的细节。

若经常关注性能优化的话题，可能会发现无论怎样对代码做最好的优化也不及对一张图片做一次压缩好。所以压缩图片成了性能优化里最常见的操作，不管是手动压缩图片还是自动压缩图片，在项目开发过程中必须得有。

自动压缩图片通常在webpack构建项目时接入一些第三方Loader&Plugin来处理。打开Github，搜素webpack image等关键字，Star最多还是image-webpack-loader和imagemin-webpack-plugin这两个Loader&Plugin。很多同学可能都会选择它们，方便快捷，简单易用，无脑接入。

可是，这两个Loader&Plugin存在一些特别问题，它们都是基于imagemin开发的。imagemin的某些依赖托管在国外服务器，在npm i xxx安装它们时会默认走GitHub Releases的托管地址，若不是规范上网，你们是不可能安装得上的，即使规范上网也不一定安装得上。所以笔者又刨根到底发表了一篇关于NPM镜像处理的文章《聊聊NPM镜像那些险象环生的坑》，专门解决这些因为网络环境而导致安装失败的问题。除了这个安装问题，imagemin还存在另一个大问题，就是压缩质感损失得比较严重，图片体积越大越明显，压缩出来的图片总有几张是失真的，而且总体压缩率不是很高。这样在交付项目时有可能被细心的QA小姐姐抓个正着，怎么和设计图对比起来不清晰啊！

工具

图片压缩工具

此时可能有些同学已转战到手动压缩图片了。比较好用的图片压缩工具无非就是以下几个，若有更好用的工具麻烦在评论里补充喔！同时笔者也整理出它们的区别，供各位同学参考。

工具	开源	收费	API	免费体验
QuickPicture	✖️	✔️	✖️	可压缩类型较多，压缩质感较好，有体积限制，有数量限制
ShrinkMe	✖️	✖️	✖️	可压缩类型较多，压缩质感一般，无数量限制，有体积限制
Squoosh	✔️	✖️	✔️	可压缩类型较少，压缩质感一般，无数量限制，有体积限制
TinyJpg	✖️	✔️	✔️	可压缩类型较少，压缩质感很好，有数量限制，有体积限制
TinyPng	✖️	✔️	✔️	可压缩类型较少，压缩质感很好，有数量限制，有体积限制
Zhitu	✖️	✖️	✖️	可压缩类型一般，压缩质感一般，有数量限制，有体积限制

从上述表格对比可看出，免费体验都会存在体积限制，这个可理解，即使收费也一样，毕竟每个人都上传单张10多M的图片，哪个服务器能受得了。再来就是数量限制，一次只能上传20张，好像有个规律，压缩质感好就限制数量，否则就不限制数量，当然收费后就没有限制了。再来就是可压缩类型，图片类型一般是jpg、png、gif、svg和webp，gif压缩后一般都会失真，svg通常用在矢量图标上很少用在场景图片上，webp由于兼容性问题很少被使用，故能压缩jpg和png就足够了。当然压缩质感是最优考虑，综上所述，大部分同学都会选择TinyJpg和TinyPng，其实它俩就是兄弟，出自同一厂商。

在笔者公众号的微信讨论群里发起了一个简单的投票，最终还是TinyJpg和TinyPng胜出。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qHDNfCwf-1597040364129)(https://yangzw.vip/static/article/webpack-plugin/tool-vote.jpg)]

TinyJpg/TinyPng存在问题

上传下载全靠手动
只能压缩jpg和png
每次只能压缩20张
每张体积最大不能超过5M
可视化处理信息不是特别齐全

TinyJpg/TinyPng压缩原理

TinyJpg/TinyPng使用智能有损压缩技术将图片体积降低，选择性地减少图片中相似颜色，只需很少字节就能保存数据。对视觉影响几乎不可见，但是在文件体积上就有很大的差别。而使用到智能有损压缩技术被称为量化。

TinyJpg/TinyPng在压缩png文件时效果更显著。扫描图片中相似颜色并将其合并，通过减少颜色数量将24位png文件转换成体积更小的8位png文件，丢弃所有不必要的元数据。

大部分png文件都有50%~70%的压缩率，即使视力再好也很难区分出来。使用优化过的图片可减少带宽流量和加载时间，整个网站使用到的图片经TinyJpg/TinyPng压缩一遍，其成效是再多的代码优化也无法追赶得上的。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ldueVmTV-1597040364130)(https://tinify.cn/images/apng/panda-waving-2x.png)]

TinyJpg/TinyPng开发API

查阅相关资料，发现TinyJpg/TinyPng暂时还未开源其压缩算法，不过提供了适合开发者使用的API。有兴趣的同学可到其开发API文档瞧瞧。

在Node方面，TinyJpg/TinyPng官方提供了tinify作为压缩图片的核心JS库，使用很简单，看文档吧。可是换成开发API还是逃不过收费，你是想包月呢还是免费呢，想免费的话就继续往下看，土豪随意！

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AZl5wJNJ-1597040364132)(https://yangzw.vip/static/article/webpack-plugin/tool-price.png)]

实现

笔者也是经常使用TinyJpg/TinyPng的程序猿，收费，那是不可能的