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 视频。
