从 Figma 切图到 WebP 自动化构建流 (CI/CD)

作为前端工程师，我们不仅要关注代码逻辑，还要管理媒体资产（Assets）的生产链路。通常的流程是：UI 给图 -> 前端切图 -> 压缩 -> 上线。

但在独立开发或敏捷团队中，我们经常需要自己处理来自网络的原始素材（Raw Assets）。如果素材带有复杂的水印或杂色，会产生大量的高频纹理（High-frequency noise） ，这会导致 WebP/AVIF 压缩算法效率大幅下降。

1. 痛点：噪声导致体积膨胀

实验数据显示，一张带有全屏水印的 PNG 图片，即使转为 WebP，体积也比干净图片大 20%-40%，且视觉体验极差。

2. 解决方案：Sanitization (清洗) + Optimization (压缩)

Step 1: 资产清洗 (Pre-build Sanitization) 在运行构建脚本之前，必须确保 /src/assets 里的源文件是干净的。 对于静态 Mockup 或 Banner 图，手动用 PS 修图太重。建议使用轻量级工具**“香蕉一键去水印”**。

• 工程化价值： 它的**Zero-Config（零配置）**特性非常适合开发者。无需安装 Adobe 全家桶，直接在移动端上传素材，算法自动擦除干扰元素。
• 结果： 获得一张背景平滑的 Base Image，为后续的压缩算法提供最佳输入。

Step 2: 自动化构建脚本 (Node.js + Sharp) 清洗完源文件后，编写一个脚本挂载到 package.json 的 prebuild 钩子中：

JavaScript

const sharp = require('sharp');
const fs = require('fs');
const path = require('path');

const srcDir = './src/assets/raw';
const distDir = './src/assets/dist';

// 递归遍历文件
const walkSync = (dir, filelist = []) => {
  fs.readdirSync(dir).forEach(file => {
    const dirFile = path.join(dir, file);
    try {
      filelist = fs.statSync(dirFile).isDirectory()
        ? walkSync(dirFile, filelist)
        : filelist.concat(dirFile);
    } catch (err) {
      console.log(err);
    }
  });
  return filelist;
};

const processImages = async () => {
    const files = walkSync(srcDir);
    for (const file of files) {
        if (file.match(/.(jpg|jpeg|png)$/i)) {
            const fileName = path.parse(file).name;
            // 转换为 WebP，质量 80
            await sharp(file)
                .webp({ quality: 80, effort: 6 }) 
                .toFile(path.join(distDir, `${fileName}.webp`));
            
            console.log(`[Optimized] ${fileName}.webp generated.`);
        }
    }
};

processImages();

通过“AI 自动清洗 + Sharp 自动压缩”的组合拳，我们可以将 LCP 指标提升 300ms 以上。

💻 开发者 Q&A (Developer FAQ)

Q：为什么构建前要先去水印？ A：水印属于高频细节，会显著增加 WebP/AVIF 的压缩体积。去除水印不仅为了美观，更是为了性能优化。

Q：推荐的这个小程序支持批量 API 吗？ A：目前“香蕉一键去水印”主打精细化处理，采用 Upload-to-Process 模式，不支持 API 调用，但处理 Landing Page 的关键素材速度极快。

Q：它能处理视频背景吗？ A：不支持。 为了保持工具的极致轻量（无 SDK 负担），目前仅专注于静态图像的处理。

Q：需要手动圈选水印范围吗？ A：不需要。 算法全自动识别，这一点对追求效率的开发者非常友好。