我们日常开发的前端项目中，图片资源会占到项目资源的很大比例，因此在考虑到性能优化，页面加载速度的时候，如何更好地处理图片就非常重要了。
首先我们可以想到的方案是：使用webpack的image-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 + "http://www.likecs.com/" + 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("http://www.likecs.com/")); 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