webpack 图像压缩_基于 TinyPNG 封装的一个支持nodejs、命令行和 webpack 的图片压缩工具...

最新推荐文章于 2024-04-22 09:49:30 发布
最新推荐文章于 2024-04-22 09:49:30 发布
阅读量305 收藏
点赞数
文章标签： webpack 图像压缩
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39713763/article/details/111486636
版权
文章介绍了基于TinyPNG封装的@mora/tinypng工具，支持nodejs、命令行和webpack的图片压缩。该工具使用TinyPNG的API进行智能压缩，同时结合svgo压缩SVG。用户可通过多个账号Token循环调用API，实现无限制的免费压缩。工具提供了详细使用方法，包括在nodejs、命令行和webpack中的应用。
摘要由CSDN通过智能技术生成

@mora/tinypng

基于 TinyPNG 封装的一个支持nodejs、命令行 和webpack的图片压缩工具

支持压缩的图片格式

png

jpg/jpeg

svg (TinyPNG 不支持压缩 svg，所以在 @mora/tinypng 中使用了 svgo 来压缩)

背景

当前市面上有很多图片压缩工具，但TinyPNG是我目前所遇到的在保证压缩质量的前提下压缩效率最好的一款压缩工具。官方解释说：

TinyPNG uses smart lossy compression techniques to reduce the file size of your PNG files. By selectively decreasing the number of colors in the image, fewer bytes are required to store the data. The effect is nearly invisible but it makes a very large difference in file size!

不过 TinyPNG 并没有开源，所以它的具体压缩算法不得而知，我们只能通过调用它提供的 API 来压缩图片，而每个月每个帐户只能调用 500 次它的 API，如果想调用更多次数，你需要付费升级你的帐户。

所以，为了可以得到 TinyPNG 高效率压缩的图片，同时又希望无限制的免费调用它的 API，就有了此工具

原理

前提：需要用户手动去TinyPNG官网注册(注册很简单，只要邮箱就行了)多个帐户，获取到每个帐户的 token，提供给此程序

程序会循环使用用户提供的 token 去调用官方 API&#

最低0.47元/天 解锁文章
weixin_39713763
关注
nodejs利用tinyPNG的API批量压缩图像文件
weixin_38785881的博客
05-16 2480
平时如果在客户端的，尤其是游戏客户端面临最大游戏内存问题，莫过于图像和声音两种，下面详细阐述如果将超大图像文件批量压缩，压缩后缩减60%左右，除了一些需要高清的外其他的基本没有影响。 先介绍个网站https://tinypng.com这个网站可以上传图片压缩支持png，jpg格式，方便简单。但是如果手动一个上传，动辄几百张图片就显得十分的慢。下面就介绍tinypng提供的api，批量上传...
Node.js-基于TinyPNG封装的一个支持nodejs命令行和webpack的图片压缩工具
08-10
基于 TinyPNG 封装的一个支持nodejs、命令行和 webpack 的图片压缩工具
nodejs 全自动使用 Tinypng （免费版，无需任何配置）压缩图片
weixin_33853827的博客
07-03 2161
前端一直比较喜欢tinypng压缩图片，但是每次都要用手拖来拖去，很累.最近不忙了，node撸了一段100行的代码，一个命令全自动压缩文件夹（包含子文件夹）里所有大小小于5MB的jpg和png图片，亲测成功，再次感谢tinypng。 大体思路： 递归获取本地文件夹里的文件 过滤文件，格式必须是.jpg .png,大小小于5MB.(文件夹...
嗯，手搓一个TinyPng压缩图片的WebpackPlugin也SoEasy啦
JowayYoung谈前端
08-10 1043
作者：JowayYoung 仓库：Github、CodePen 博客：掘金、思否、知乎、简书、头条、CSDN 公众号：IQ前端 联系我：关注公众号后有我的微信哟 特别声明：原创不易，未经授权不得对此文章进行转载或抄袭，否则按侵权处理，如需转载或开通公众号白名单可联系我，希望各位尊重原创的知识产权 前言 曾经发表过一篇性能优化的文章《前端性能优化指南》，笔者总结了一些在项目开发过程中使用过的性能优化经验。说句真话，性能优化可能在面试过程中会有用，实际在项目开发过程中可能没几个同学会注意这些性能优化的细节。.
tinyimg-webpack-plugin:一个用于压缩图像的webpack插件
05-10
Tinyimg Webpack Plugin tinyimg-webpack-plugin是一个压缩图像的Webpack扩展器，提供JPG和PNG的压缩功能 安装 npm i tinyimg-webpack-plugin 安装准备 提前安装webpack和webpack-cli：npm i webpack webpack-cli 必须依赖webpack 4.0.0以上和webpack-cli 3.0.0以上 安装失败 切换NPM镜像为淘宝镜像：npm config set registry https://registry.npm.taobao.org/ 重新执行安装命令：npm i tinyimg-webpack-plugin 使用 配置 功能 格式 描述 enabled 是否启用插件 true/false 建议只在生产环境下开启 logged 是否打印日志 true/false 打印压
webpack 压缩图片
weixin_44996782的博客
12-11 1097
问题描述:vue正常打包之后一些图片文件很大，使打包体积很大，通过image-webpack-loader插件可将大的图片进行压缩从而缩小打包体积。 参考，点这里 解决方法: 一定要用cnpm安装 cnpm i image-webpack-loader --save-dev vue.config.js module.exports = { publicPath: process.env.NODE_ENV === "development" ? "/" : "./", production
webpack入门(二):配置webpack.config.js
An_Cool_bree的博客
06-08 2157
webpack.config.js文件中，主要包括 entry:入口文件 output:出口文件 module:模块 plugins:插件
Node.js-SVGO基于Nodejs的工具用于优化SVG矢量图形文件
08-10
为了解决这个问题，开发者引入了SVGO（SVG Optimizer），一个基于Node.js的工具，专门用于优化SVG文件，减小文件大小，提高网页性能。 **Node.js简介** Node.js是一款开放源代码、跨平台的JavaScript运行环境，它...
小白webpack教程！webpack.config,js 入坑
猛猛的博客
07-10 559
写在前面： &emsp相信刚刚开始学前端的朋友都听说过webpack，但是仅仅是听说，去找工作的时候面试官又经常问到，自己平时写练习做项目的时候也是直接使用框架中的脚手架。对于其中的内容还不是特别了解，这篇文章将通过一个小练习对webpack.config.js的内容进行一个简单的说明，让刚刚开始学习webpack的朋友有一个初步的了解。 ...
提供一个NodeJS环境下基于TinyPNG服务的批量压缩任意数量图片的工具。
08-10
提供一个NodeJS环境下，基于TinyPNG服务的，批量压缩任意数量图片的工具
TinyPNG Wrapper
12-05
图片压缩利器：TinyPNGWrapper 一文中的图片压缩工具
tinypng:使用 tinypng 提供的 API 利用 Node.js 进行本地批量压缩图片
06-05
tinypng 使用 tinypng 提供的 API 利用 Node.js 进行本地批量压缩图片 需要到 申请密匙 将申请的密匙填写到 tinypng/config/key.js 中 然后就可以使用 node tinypng.js path true/false [true 覆盖原图，false 将保留原图创建一张 .min 的图片]
TinyPNG 2.3.9.zip
06-18
PS里无损压缩png或者jpg，解压出来，放到ps根目录，即可，导出选项会多出来TinyPNG按钮
teenypng:使用 TinyPNG 优化 PNG 图片
06-25
小PNG 使用优化 PNG + JPEG 图像。 命令行 使用安装。 $ npm install -g teenypng $ teenypng images/ * .png --apikey XXXXXXXXXX 作为模块 安装 $ npm install --save-dev teenypng 用 "use strict" ; var teenypng = require ( "teenypng" ) ; teenypng ( "image.png" , { "apikey" : "XXXXXXXXXX" } , function ( err , optimized ) { // optimized = { // "input": { // "size": 207565, // "name": "image
前端-图片压缩，基于vue/webpack的tinypng插件
laxnocsdn的博客
01-08 1455
前端，静态资源图片等自动化压缩，适用于vue或者webpack的tinypng插件
推荐一款高效图片压缩工具：TinyPNG Node.js 批量处理器
最新发布
gitblog_00099的博客
04-22 393
推荐一款高效图片压缩工具：TinyPNG Node.js 批量处理器 项目地址:https://gitcode.com/qjoy/TinyPNGNodeJSBatcher 在我们日常的网页和应用开发中，图片是不可或缺的一部分。然而，未经优化的大尺寸图片可能会拖慢页面加载速度，影响用户体验。这就是TinyPNG Node.js 批量处理器派上用场的地方。这是一个利用TinyPNG API实现的Nod...
nodejs tinypng 压缩
u012338130的专栏
11-10 653
/** * 帮助文档 * ------- * * 获取帮助 * 指令 -h * * 获取命令执行文件夹 * 指令 -f * 参数 ./ * 必填，待处理的图片文件夹 * * 获取是否深度递归处理图片文件夹 * 指令 -deep * 可选，默认不深度递归 * * 命令行脚本参考示例 * > node ./tinypng.js -f ./test -deep * */ const fs = require('fs'); const path = re.
TinyPNG
oschina_kk的博客
02-02 660
TinyPNG在线压缩图片网站可以对图片进行压缩并失真较少，免费支持5M大小以下的图片 官方网站：https://tinypng.com/
解释这行代码__webpack_require__.r(__webpack_exports__);
05-28
这行代码是Webpack打包工具生成的模块加载代码之一，用于设置模块的导出方式。 具体解释如下： 1. __webpack_require__是Webpack在打包过程中自动添加的全局函数，用于加载JavaScript模块。 2. .r是Webpack在__webpack_require__对象上添加的一个方法，用于设置模块的导出方式。 3. (__webpack_exports__)表示当前模块的导出对象，它是一个JavaScript对象，包含了本模块向外导出的变量和函数。 4. __webpack_require__.r(__webpack_exports__)表示调用Webpack的设置导出方式的函数，将__webpack_exports__对象设置为ES6模块的默认导出对象。 总之，这行代码是Webpack打包工具生成的模块加载代码之一，用于设置模块的导出方式，使得其他模块可以通过ES6模块语法引用当前模块的导出变量和函数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值