Firebase部署时是否清除Next.js优化图片缓存？如何持久化？

算力阿峰

2026-7-3

问题解答

Firebase部署是否会清除Next.js优化图片缓存？

是的，Firebase部署时会清除Next.js生成的优化图片缓存。原因在于：Next.js Image组件默认将优化后的图片缓存存放在服务器本地文件系统中，而部署到Firebase Functions的Next.js应用，其运行依赖的函数容器是无状态的——每次部署都会替换旧的容器实例，之前存储在容器内的本地缓存会被完全清除。

至于webp格式不受影响的原因：一是webp的压缩算法相对简单，生成速度远快于avif；二是Firebase Hosting的CDN默认对webp资源的缓存策略更友好，或者Next.js返回webp时设置的Cache-Control头更利于CDN长期缓存，即使函数容器更新，CDN中已缓存的webp资源依然有效，无需重新生成。

持久化优化图片缓存的解决方案

1. 自定义Image Loader，将缓存存储到Firebase Storage

编写自定义loader函数，让Next.js优先从Firebase Storage读取已优化的图片，不存在时再生成并上传到Storage（持久化存储），彻底摆脱函数容器本地缓存的限制。

示例loader代码（可单独创建firebase-image-loader.js文件）：

import { getStorage, ref, getDownloadURL, uploadBytes } from "firebase/storage";
import sharp from "sharp";

export default async function firebaseLoader({ src, width, quality }) {
  const storage = getStorage();
  // 构造Storage中的唯一文件路径
  const fileName = `${width}-${quality}-${src.split("/").pop()}.avif`;
  const storageRef = ref(storage, `optimized-images/${fileName}`);

  try {
    // 检查Storage中是否已有缓存
    return await getDownloadURL(storageRef);
  } catch {
    // 无缓存则生成avif图片并上传
    const imageBuffer = await sharp(`public${src}`)
      .resize(width)
      .avif({ quality: quality || 75 })
      .toBuffer();
    
    await uploadBytes(storageRef, imageBuffer);
    return await getDownloadURL(storageRef);
  }
}

在next.config.js中配置使用自定义loader：

module.exports = {
  images: {
    loader: "custom",
    loaderFile: "./firebase-image-loader.js",
    domains: ["firebasestorage.googleapis.com"],
  },
};

2. 配置Firebase Hosting CDN缓存规则

通过设置强缓存头，让Firebase CDN长期缓存优化后的图片，即使函数容器更新，用户请求也能直接命中CDN缓存，无需触发重新生成。

在firebase.json中添加缓存配置：

{
  "hosting": {
    "headers": [
      {
        "source": "**/*.avif",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=31536000, immutable"
          }
        ]
      },
      {
        "source": "**/*.webp",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=31536000, immutable"
          }
        ]
      }
    ]
  }
}

3. 构建阶段预生成所有优化图片

在next build时，用脚本批量处理所有需要展示的图片，提前生成对应尺寸的avif/webp格式，上传到Firebase Storage或放到public目录，部署后直接使用预生成的资源，彻底避免实时生成的耗时。

示例脚本（使用sharp库）：

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

const inputDir = "./public/images";
const outputDir = "./public/optimized-images";

// 创建输出目录
if (!fs.existsSync(outputDir)) fs.mkdirSync(outputDir, { recursive: true });

// 遍历输入目录的图片
fs.readdirSync(inputDir).forEach(async (file) => {
  const ext = path.extname(file);
  if (![".png", ".jpg", ".jpeg"].includes(ext)) return;

  const inputPath = path.join(inputDir, file);
  const baseName = path.basename(file, ext);

  // 生成不同尺寸的avif和webp
  const sizes = [320, 640, 1280];
  for (const size of sizes) {
    await sharp(inputPath)
      .resize(size)
      .avif({ quality: 75 })
      .toFile(path.join(outputDir, `${baseName}-${size}.avif`));
    
    await sharp(inputPath)
      .resize(size)
      .webp({ quality: 80 })
      .toFile(path.join(outputDir, `${baseName}-${size}.webp`));
  }
});

4. 优化avif生成速度

调整Next.js的sharp配置，降低avif的压缩复杂度，即使需要实时生成，也能减少等待时间：

module.exports = {
  images: {
    formats: ["image/avif", "image/webp"],
  },
  webpack: (config) => {
    config.module.rules.push({
      test: /\.(png|jpe?g|gif)$/i,
      use: [
        {
          loader: "sharp-loader",
          options: {
            avif: {
              quality: 70, // 适当降低质量
              effort: 4, // 降低压缩算力消耗，提升速度
            },
          },
        },
      ],
    });
    return config;
  },
};

内容的提问来源于stack exchange，提问作者jasan