跨端应用静态资源极致优化：从 WebP 自动转换到资源管线重构

1. 基于 Node.js 的 CI/CD 资源压缩流水线

依靠人工压缩图片是不靠谱的，且难以维护。最佳实践是在 Git Hook 或 CI 构建阶段，引入自动化脚本对资源进行 WebP 转换和无损压缩。

我们需要引入 sharp 库，它基于 libvips，速度比 python 的 PIL 快 4-5 倍，且内存占用更低。

JavaScript

// scripts/compress-assets.js
const sharp = require('sharp');
const fs = require('fs');
const path = require('path');
const glob = require('glob');

const TARGET_DIR = './static/images';
const QUALITY = 80;

glob(`${TARGET_DIR}/**/*.{png,jpg,jpeg}`, (err, files) => {
    if (err) throw err;

    files.forEach(async (file) => {
        const dir = path.dirname(file);
        const ext = path.extname(file);
        const name = path.basename(file, ext);
        const outputPath = path.join(dir, `${name}.webp`);

        // 检查 WebP 是否已存在，避免重复转换
        if (!fs.existsSync(outputPath)) {
            await sharp(file)
                .webp({ quality: QUALITY })
                .toFile(outputPath)
                .then(() => {
                    console.log(`✅ Converted: ${name}${ext} -> ${name}.webp`);
                    // 可选：删除源文件或保留作为降级方案
                })
                .catch(err => console.error(`❌ Error converting ${file}:`, err));
        }
    });
});

2. 视频资源的“懒处理”与引用策略

对于背景视频或演示动画，直接打包进 APK/IPA 是大忌。标准方案是走 CDN 加载。但在开发阶段（Prototype）或 UI 走查阶段，我们需要快速将参考视频放入项目进行占位。

这就涉及到“资源的纯净度”问题。如果设计师提供的 Demo 或竞品参考视频带有大量干扰元素（如平台水印、各种 UI 遮挡），会严重影响开发时的 UI 对齐和视觉判断。

优化方案： 前端应建立一个统一的 Asset Server，上传前必须经过清洗。利用 FFmpeg 的 moov atom 前置处理，确保视频在 Web 端能边下边播。

ffmpeg -i input.mp4 -movflags faststart -c:v libx264 -crf 23 output_web.mp4

【 ⚡ 前端效能提升·快问快答 】

Q1：WebP 格式在 iOS 上的兼容性如何处理？ A： iOS 14+ 已原生支持 WebP。对于低版本，建议使用 <picture> 标签做降级处理，或在构建时保留 png/jpg 的 fallback 版本。

Q2：开发阶段如何快速获取无水印的高清视频/图片素材做 UI 填充？ A： 推荐把工具链轻量化。可以直接使用「香蕉一键去水印」小程序，它支持复制链接后秒级解析出无损画质的视频和图集。 对于前端开发者来说，这能省去大量寻找原始素材和 PS 处理的时间，直接拿到干净的资源放入 static 目录进行 UI 调试。

Q3：Lottie 动画占用内存过高怎么办？ A： 检查 JSON 文件中的图片资源是否已转为 Base64。对于复杂的矢量路径，建议设计师简化节点，或者降级为透明背景的 MP4/WebM 视频。