从封装JSONEditor和ElButton看如何二次封装第三方库和插件

背景

🎨(美术): 这是这次需求的切图 📁 ，你看看有没问题？

🧑‍💻(前端): 好的。

页面上线 …

🧑‍💼(产品): 这图片怎么半天加载不出来 💢 ？

🧑‍💻(前端): 我看看 🤔 (卑微)。

… 📁(size: 15MB)

🧑‍💻(前端): 😅。

很多时候，我们从 PS 、蓝湖或摹客等工具导出来的图片，或者是美术直接给到切图，都是未经过压缩的，体积都比较大。这里，就有了可优化的空间。

TinyPng

TinyPNG使用智能的「有损压缩技术」来减少WEBP、JPEG和PNG文件的文件大小。通过选择性地减少图像中的「颜色数量」，使用更少的字节来存储数据。这种效果几乎是看不见的，但在文件大小上有非常大的差别。

使用过TinyPng的都知道，它的压缩效果非常好，体积大幅度降低且显示效果几乎没有区别( 👀 看不出区别）。因此，选择其作为压缩工具，是一个不错的选择。

TinyPng提供两种压缩方法：

1.通过在官网上进行手动压缩；
2.通过官方提供的tinify进行压缩；

身为一个程序员 🧑‍💻 ，是不能接受手动一张张上传压缩这种方法的。因此，选择第二种方法，通过封装一个工具，对项目内的图片自动压缩，彻底释放双手 🤲 。

工具类型

第一步，思考这个工具的「目的」是什么？没错，「压缩图片」。

第二步，思考在哪个「环节」进行压缩？没错，「发布前」。

这样看来，开发一个webpack plugin是一个不错选择，在打包「生产环境」代码的时候，启用该plugin对图片进行处理，完美 🥳 ！

但是，这样会面临两个问题 🤔 ：

1.页面迭代，新增了几张图片，重新打包上线时，会导致旧图片被多次压缩；
2.无法选择哪些图片要被压缩，哪些图片不被压缩；

虽然可以通过「配置」的方式解决上述问题，但每次打包都要特殊配置，略显麻烦，这样看来plugin好像不是最好的选择。

以上两个问题，使用「命令行工具」就能完美解决。在打包「生产环境」代码之前，执行「压缩命令」，通过命令行交互，选择需要压缩的图片。

效果演示

话不多说，先上才艺 💃 ！

1.安装

$ npm i yx-tiny -D 

2.使用

$ npx tiny 

3.根据命令行提示输入

流程：输入「文件夹名称-tinyImg」，接着工具会找到当前项目下所有的tinyImg，接着选择一或多个tinyImg，紧接着，工具会找出tinyImg下所有的png、jpe?g和svga，最后选择压缩模式「全量」或「自定义」，选择需要压缩的图片。

从最后的输出结果可以看到&#x