图片不压缩，前端要背锅

2023-10-08 06:40
文章标签 图片 前端 压缩 frontend 背锅

本文主要是介绍图片不压缩，前端要背锅，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

大家好，好久没见，最近有点懒，很久没更新啦。这次要聊的主题是「 图片压缩」。在一般页面里面，使用最多的「静态素材」非图片莫属了，这次轮到对它动手 👊 ！

背景

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

🧑‍💻(前端): 好的。

页面上线 ...

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

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

... 📁(size: 15MB)

🧑‍💻(前端): 😅。

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

TinyPng

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

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

TinyPng提供两种压缩方法：

  1. 通过在官网上进行手动压缩；

  1. 通过官方提供的tinify进行压缩；

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

工具类型

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

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

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

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

  1. 页面迭代，新增了几张图片，重新打包上线时，会导致旧图片被多次压缩；

  1. 无法选择哪些图片要被压缩，哪些图片不被压缩；

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

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

效果演示

话不多说，先上才艺 💃 ！

  1. 安装

$ npm i yx-tiny -D

  1. 使用

$ npx tiny

  1. 根据命令行提示输入

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

从最后的输出结果可以看到，压缩前的资源体积为2.64MB，压缩后体积为1.02MB，足足压缩了1.62MB 👍 ！

然后再继续执行一遍命令再次压缩，刚刚压缩过的资源被识别出来，因为没有新增资源，所以输出「目标文件夹内」找不到「可压缩」的资源！

实现思路

总体分为五个过程：

  1. 查找：找出所有的图片资源；

  1. 分配：均分任务到每个进程；

  1. 上传：把原图上传到TinyPng；

  1. 下载：从TinyPng中下载压缩好的图片；

  1. 写入：用下载的图片覆盖本地图片；

项目地址：yx-tiny

查找

找出所有的图片资源。

packages/tiny/src/index.ts 
/*** 递归找出所有图片* @param { string } path* @returns { Array<imageType> }*/
interface IdeepFindImg {(path: string): Array<imageType>
}
let deepFindImg: IdeepFindImg
deepFindImg = (path: string) => {// 读取文件夹的内容const content = fs.readdirSync(path)// 用于保存发现的图片let images: Array<imageType> = []// 遍历该文件夹内容content.forEach(folder => {const filePath = resolve(path, folder)// 获取当前内容的语法信息const info = fs.statSync(filePath)// 当前内容为“文件夹”if (info.isDirectory()) {// 对该文件夹进行递归操作images = [...images, ...deepFindImg(filePath)]} else {const fileNameReg = /\.(jpe?g|png|svga)$/const shouldFormat = fileNameReg.test(filePath)// 判断当前内容的路径是否包含图片格式if (shouldFormat) {// 读取图片内容保存到imagesconst imgData = fs.readFileSync(filePath)images.push({path: filePath,file: imgData})}}})return images
}

通过命令行交互后，拿到目标文件夹的路径path，然后获取该path下的所有内容，接着遍历所有内容。首先判断该内容的文件信息：若为“文件夹”，则把该文件夹路径作为path，递归调用deepFindImg；若不为“文件夹”，判断该内容为图片，则读取图片数据，push到images中。最后，返回所有找到的图片。

分配

均分任务到每个进程。

packages/tiny/src/index.ts 
// ...
cluster.setupPrimary({exec: resolve(__dirname, 'features/process.js')
})// 若资源数小于则创建一个进程，否则创建多个进程
const works: Array<{work: Worker;tasks: Array<imageType>
}> =[]
if (list.length <= cpuNums) {works.push({work: cluster.fork(),tasks: list})
} else {for (let i = 0; i < cpuNums; ++i) {const work = cluster.fork()works.push({work,tasks: []})}
}// 平均分配任务
let workNum = 0 
list.forEach(task = >{if (works.length === 1) {return} else if (workNum >= works.length) {works[0].tasks.push(task)workNum = 1} else {works[workNum].tasks.push(task)workNum += 1}
})// 用于记录进程完成数
let pageNum = works.length// 初始化进度条
// ...works.forEach(({work,tasks
}) = >{// 发送任务到每个进程work.send(tasks)// 接收任务完成work.on('message', (details: Idetail[]) = >{// 更新进度条// ...pageNum--// 所有任务执行完毕if (pageNum === 0) {// 关闭进程cluster.disconnect()}})
})

使用cluster，根据「cpu核心数」创建等量的进程，works用于保存已创建的进程，list中保存的是要处理的压缩任务，通过遍历list，把任务依次分给每一个进程。接着遍历works，通过send方法发送进程任务。通过监听message事件，利用pageNum记录进程任务的完成情况，当所有进程任务执行完毕后，则关闭进程。

上传

官方提供的tinify工具有「500张/月」的限额，超过限额后，需要付费。

由于家境贫寒，且出于学习的目的，就没有使用tinify，而是通过构造随机IP来直接请求「压缩接口」来达到「破解限额」的目的。大家在真正使用的时候，还是要使用tinyfy来压缩，不要做这种投机取巧的事。

好了，回到正文。

把原图上传到TinyPng。

packages/tiny/src/features/index.ts 
/*** 上传函数* @param { Buffer } file 文件buffer数据* @returns { Promise<DataUploadType> }*/
interface Iupload {(file: Buffer): Promise<DataUploadType>
}
export let upload: Iupload
upload = (file: Buffer) => {// 生成随机请求头const header = randomHeader()return new Promise((resolve, reject) => {const req = Https.request(header, res => {res.on('data', data => {try {const resp = JSON.parse(data.toString()) as DataUploadTypeif (resp.error) {reject(resp)} else {resolve(resp)}} catch (err) {reject(err)}})})// 上传图片bufferreq.write(file)req.on('error', err => reject(err))req.end()})
}

使用node自带的Https模块，构造请求头，把deepFindImg中返回的图片进行上传。上传成功后，会返回已经压缩好的图片的url链接。

下载

从TinyPng中下载压缩好的图片。

packages/tiny/src/features/index.ts 
/*** 下载函数* @param { string } path* @returns { Promise<string> }*/
interface Idownload {(path: string): Promise<string>
}
export let download: Idownload
download = (path: string) => {const header = new Url.URL(path)return new Promise((resolve, reject) => {const req = Https.request(header, res => {let content = ''res.setEncoding('binary')res.on('data', data => (content += data))res.on('end', () => resolve(content))})req.on('error', err => reject(err))req.end()})
}

使用node自带的Https模块把upload中返回的图片链接进行下载。下载成功后，返回图片的buffer数据。

写入

把下载好的图片覆盖本地图片。

packages/tiny/src/features/process.ts 
/*** 接收进程任务*/
process.on('message', (tasks: imageType[]) => {;(async () => {// 优化 png/jpgconst data = tasks.filter(({ path }: { path: string }) => /\.(jpe?g|png)$/.test(path)).map(ele => {return compressImg({ ...ele, file: Buffer.from(ele.file) })})// 优化 svgaconst svgaData = tasks.filter(({ path }: { path: string }) => /\.(svga)$/.test(path)).map(ele => {return compressSvga(ele.path, Buffer.from(ele.file))})const details = await Promise.all([...data.map(fn => fn()),...svgaData.map(fn => fn())])// 写入await Promise.all(details.map(({ path, file }) =>new Promise((resolve, reject) => {fs.writeFile(path, file, err => {if (err) reject(err)resolve(true)})})))// 发送结果if (process.send) {process.send(details)}})()
})

process.on监听每个进程发送的任务，当接收到任务类型为「图片」，使用compressImg方法来处理图片。当任务类型为「svga」，使用compressSvga方法来处理svga。最后把处理好的资源写入到本地覆盖旧资源。

compressImg

packages/tiny/src/features/process.ts 
/*** 压缩图片* @param { imageType } 图片资源* @returns { promise<Idetail> }*/
interface IcompressImg {(payload: imageType): () => Promise<Idetail>
}
let compressImg: IcompressImg
compressImg = ({ path, file }: imageType) => {return async () => {const result = {input: 0,output: 0,ratio: 0,path,file,msg: ''}try {// 上传const dataUpload = await upload(file)// 下载const dataDownload = await download(dataUpload.output.url)result.input = dataUpload.input.sizeresult.output = dataUpload.output.sizeresult.ratio = 1 - dataUpload.output.ratioresult.file = Buffer.alloc(dataDownload.length, dataDownload, 'binary')} catch (err) {result.msg = `[${chalk.blue(path)}] ${chalk.red(JSON.stringify(err))}`}return result}
}

compressImg返回一个async函数，该函数先调用upload进行图片上传，接着调用download进行下载，最终返回该图片的buffer数据。

compressSvga

packages/tiny/src/features/process.ts 
/*** 压缩svga* @param { string } path 路径* @param { buffer } source svga buffer* @returns { promise<Idetail> }*/
interface IcompressSvga {(path: string, source: Buffer): () => Promise<Idetail>
}
let compressSvga: IcompressSvga
compressSvga = (path, source) => {return async () => {const result = {input: 0,output: 0,ratio: 0,path,file: source,msg: ''}try {// 解析svgaconst data = ProtoMovieEntity.decode(pako.inflate(toArrayBuffer(source))) as unknown as IsvgaDataconst { images } = dataconst list = Object.keys(images).map(path => {return compressImg({ path, file: toBuffer(images[path]) })})// 对svga图片进行压缩const detail = await Promise.all(list.map(fn => fn()))detail.forEach(({ path, file }) => {data.images[path] = file})// 压缩bufferconst file = pako.deflate(toArrayBuffer(ProtoMovieEntity.encode(data).finish() as Buffer))result.input = source.lengthresult.output = file.lengthresult.ratio = 1 - file.length / source.lengthresult.file = file} catch (err) {result.msg = `[${chalk.blue(path)}] ${chalk.red(JSON.stringify(err))}`}return result}
}

compressSvga的「输入」、「输出」和compressImg保持一致，目的是为了可以使用promise.all同时调用。在compressSvga内部，对svga进行解析成data，获取到svga的图片列表images，接着调用compressImg对images进行压缩，使用压缩后的图片覆盖data.images，最后再把data编码后，写入到本地覆盖原本的svga。

最后

再说一遍，大家真正使用的时候，要使用官方的tinify进行压缩。

参考文章：

  • protobuf.js

  • SVGAPlayer-Web-Lite

  • tinify

祝大家生活愉快，工作顺利！

「 --- The end --- 」

这篇关于图片不压缩，前端要背锅的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/163411。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

利用康拓展开将一个排列映射成一个自然数，然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu
阅读更多...
使用opencv优化图片（画面变清晰）

使用opencv优化图片（画面变清晰）

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化，使其看起来更清晰，同时保持尺寸不变，通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多，主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器：相机传
阅读更多...
hdu1565（状态压缩）

hdu1565（状态压缩）

本人第一道ac的状态压缩dp，这题的数据非常水，很容易过 题意：在n*n的矩阵中选数字使得不存在任意两个数字相邻，求最大值 解题思路： 一、因为在1<<20中有很多状态是无效的，所以第一步是选择有效状态，存到cnt[]数组中 二、dp[i][j]表示到第i行的状态cnt[j]所能得到的最大值，状态转移方程dp[i][j] = max(dp[i][j],dp[i-1][k]) ,其中k满足c
阅读更多...
计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者：计算机编程-吉哥 🍊简介：专业从事JavaWeb程序开发，微信小程序开发，定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事，生活就是快乐的。 🍊心愿：点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能
阅读更多...
Vue3项目开发——新闻发布管理系统（六）

Vue3项目开发——新闻发布管理系统（六）

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后，系统就进入了首页。接下来，也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分，左侧为系统的菜单栏，右侧
阅读更多...
【VUE】跨域问题的概念，以及解决方法。

【VUE】跨域问题的概念，以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略，该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同，则需要服务器显式地允许这种跨域请求。一般在springbo
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2