我们日常开发的前端项目中,图片资源会占到项目资源的很大比例,因此在考虑到性能优化,页面加载速度的时候,如何更好地处理图片就非常重要了。

首先我们可以想到的方案是:使用webpackimage-webpack-loader来压缩图片。但是这种方案有个弊端,就是webpack每次构建的时候都要处理一次图片压缩,会影响到webpack的构建速度。

接下来要讲的是 pre-commit + imagemin 实现的图片自动压缩方案,思路是在我们git commit 时,将要提交的图片文件替换为压缩后的文件。

安装依赖

npm install pre-commit imagemin imagemin-pngquant -D

修改 package.json

// package.json
{
.... "scripts": {
"imagemin": "node imagemin.js"
},
"pre-commit": [
"imagemin"
],
}

在项目根目录下新建 imagemin.js

const execSync = require("child_process").execSync;
const path = require("path");
const imagemin = require("imagemin");
const imageminPngquant = require("imagemin-pngquant");
console.log("pre-commit hook start imagemin! \n");
let diff = getDiffFiles();
compressPics(diff); function getDiffFiles(type) {
// pre-commit钩子本身不传递参数
//https://git-scm.com/docs/githooks/1.7.4#_pre_commit
// 所以通过git diff 命令拿到本次提交涉及的变动文件
let root = process.cwd();
let files = execSync("git diff --cached --name-status HEAD")
.toString()
.split("\n");
let result = [];
// add, delete, modified, renamed, copied
type = type || "admrc";
let types = type.split("").map(t => {
return t.toLowerCase();
});
files.forEach(file => {
if (!file) {
return;
}
let temp = file.split(/[\n\t]/);
let status = temp[0].toLowerCase();
let filePath = root + "/" + temp[1];
let extName = path.extname(filePath).slice(1); if (types.length && ~types.indexOf(status)) {
result.push({
status: status, // admrc中的一个
path: filePath, // 绝对路径
subpath: temp[1], // 相对路径
extName: extName // 扩展名
});
}
});
return result;
} function compressPics(files) {
let pngs = files.filter(
file => file.extName === "png" && ["a", "m"].includes(file.status)
);
console.log(pngs);
let parentFolder = {};
pngs.forEach(x => {
// 根据不同父级目录分类
let pf = x.subpath.slice(0, x.subpath.lastIndexOf("/"));
parentFolder[pf]
? parentFolder[pf].push(x.subpath)
: (parentFolder[pf] = [x.subpath]);
}); for (let pf in parentFolder) {
imagemin(parentFolder[pf], {
// 原图片目录
destination: pf, // 生成图片的目录
plugins: [
imageminPngquant({
speed: 1,
quality: [0.4, 0.5]
})
]
})
.then(res => {
console.log(res);
execSync("git add . ");
})
.catch(err => {
console.log(err);
process.exit(1);
});
}
}

提交图片

执行 git commit 命令后,如果检测到有 png 格式的图片,会进行压缩处理后再提交。

我们把已经提交过的 pic.png 重命名为 pic1.png,不会再次进行压缩。

图片压缩后的效果

原来的图片大小 3.2M

压缩后 695.28kb

pre-commit + imagemin 实现图片自动压缩的更多相关文章

  1. 百度Ueditor设置图片自动压缩

    使用百度Ueditor插入图片的时候,如果图片大于你的编辑框宽度,下面会出现滚动条,如下图: 我们如何设置它的最大宽度为100%呢? 找到ueditor\ueditor.config.js,修改它的i ...

  2. vue+element-ui upload图片上传前大小超过4m,自动压缩到指定大小,长宽

    最近项目需要实现一个需求,用户上传图片时,图片大小超过4M,长宽超过2000,需要压缩到400k,2000宽高.在git上找到一个不错的方法,把实现方法总结一下: 安装image-conversion ...

  3. Gulp实现css、js、图片的压缩以及css、js文件的MD5命名

    目前做代码压缩合并的工具有很多,诸如gulp,webpack,grunt等等,可以说这些项目构建工具的功能非常之强大:图片压缩.图片转base64.css和js的压缩以及合并,文件的md5重命名 -- ...

  4. 移动前端—H5实现图片先压缩再上传

    在做移动端图片上传的时候,用户传的都是手机本地图片,而本地图片一般都相对比较大,拿iphone6来说,平时拍很多图片都是一两M的,如果直接这样上传,那图片就太大了,如果用户用的是移动流量,完全把图片上 ...

  5. Google Pagespeed,自动压缩优化JS/CSS/Image

    Google Pagespeed,自动压缩优化JS/CSS/Image 浏览: 发布日期:// 分类:技术分享 关键字: Nginx Appache Pagespeed 自动压缩优化JS/CSS/Im ...

  6. 原生js+css3实现图片自动切换,图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  7. JS图片自动和可控的轮播切换特效

    点击这里查看效果:http://hovertree.com/texiao/js/1.htm HTML文件代码如下: <!DOCTYPE html> <html xmlns=" ...

  8. 关于webStrom-11.1配置less且自动生成.css和自动压缩为.min.css/.min.js

    网上看过很多配置思路,自己总结了以下, 就把我个人配置的顺序以及材料分享下,webstrom以下简称WB 1.配置less需要安装nodejs,自行安装.因为要用到npm.我是直接把npm解压到C盘根 ...

  9. iOS 图片大小压缩 图片尺寸处理

    图片的压缩其实是俩概念,1.是 “压” 文件体积变小,但是像素数不变,长宽尺寸不变,那么质量可能下降,2.是 “缩” 文件的尺寸变小,也就是像素数减少.长宽尺寸变小,文件体积同样会减小. 这个 UII ...

随机推荐

  1. 使用D3.js构建实时图形

    首先你需要在计算机上安装Node和npm. 数据的可视化表示是传递复杂信息的最有效手段之一,D3.js提供了创建这些数据可视化的强大工具和灵活性. D3.js是一个JavaScript库,用于使用SV ...

  2. Codeforces Round #626 (Div. 2, based on Moscow Open Olympiad in Informatics)

    A. Even Subset Sum Problem 题意 给出一串数,找到其中的一些数使得他们的和为偶数 题解 水题,找到一个偶数或者两个奇数就好了 代码 #include<iostream& ...

  3. DvaJS入门课

    不管是Vue还是React,他们都没解决组件间的通信和数据流问题.当然,这个说法不是很准确,准确的说法是他们都没很好的处理这些问题.我们是可以用一些烂手段去解决这个问题,但是当应用比较大.数据多的时候 ...

  4. elasticjob学习二:封装elasticjob-spring-boot-starter

    之前已经简单的学习了es-job.但是如果实际应用都如同第一篇进行编写,会有很多重复代码,不方便.这篇主要是进行封装.我还会用一个demo使用下封装好的组件. elasticjob-spring-bo ...

  5. web自动化的三大等待

    由于web网页打开后需要时间进行数据的传送,页面的渲染,所以我们在写web自动化脚本的时候,需要等待它加载完所有的页面元素,我们才进行操作或点击.同时这种等待也是为了提高脚本的稳定性. seleniu ...

  6. Java 内存模型都不会,就敢在简历上写熟悉并发编程吗

    从 PC 内存架构到 Java 内存模型 你知道 Java 内存模型 JMM 吗?那你知道它的三大特性吗? Java 是如何解决指令重排问题的? 既然CPU有缓存一致性协议(MESI),为什么 JMM ...

  7. SQL的模糊查询(转载)

    本文由转载而来: 原文地址链接:http://www.cnblogs.com/GT_Andy/archive/2009/12/25/1921914.html 在进行数据库查询时,有完整查询和模糊查询之 ...

  8. HTML每日学习笔记(1)

    7.15.2019 1.HTML脚本——JavaScript的嵌入使用,使 HTML 页面具有更强的动态和交互性. <script> 标签用于定义客户端脚本,比如 JavaScript. ...

  9. 手把手教你用GoEasy实现Websocket IM聊天

    经常有朋友问起GoEasy如何实现IM,今天就手把手的带大家从头到尾用GoEasy实现一个完整IM聊天,全套代码已经放在了github. 今日的前端技术发展可谓百花争鸣,为了确保本文能帮助到使用任何技 ...

  10. 【转】在Eclipse下,出现“找不到或无法加载主类 ”的问题的解决方式

    实际上是第一次碰到这个问题,之前从来没有遇见过,于是乎就开始找“度娘”帮忙,一搜发现有很多的程序猿都遇到这个问题.网上大部分的解决方案都是说“环境变量”配置有错误,当然这确实是引发“找不到或无法加载主 ...