优化 Next.js 上的图片加载

默认情况下，内置的 Next.js 图片优化在 App Hosting 上处于停用状态，除非您明确将 images.unoptimized 设置为 false 或使用自定义图片加载器。

您可以使用图片处理 Firebase Extension 配置 Next.js 全局图片加载器，以便在 App Hosting 上通过 Next.js 应用按需优化和传送图片。

前提条件

  • 您有一个 Firebase 项目和一个 App Hosting 后端。
  • 您的项目中已启用 Cloud Storage。
  • 您的项目中已启用 Cloud Functions for Firebase。

安装扩展程序

前往 Firebase Extensions Hub 中的图片处理扩展程序，然后选择在 Firebase 控制台中安装。按照屏幕上的说明操作。

配置本地图片优化（可选）

如果您的应用使用您希望使用此扩展程序优化的本地图片，您需要在扩展程序安装过程中配置“主机名”参数。

  1. 在扩展程序配置期间：当您到达“配置扩展程序”步骤时，找到“主机名”参数。

  2. 设置主机名：输入 Firebase App Hosting 后端的默认网域。此网域通常以 .hosted.app 结尾。

安装完成后，Image Processing API 应作为函数在 Cloud Functions 中部署。前往 Firebase 控制台中的 Functions 信息中心，然后复制 Image Processing API 触发器网址。

设置自定义图片加载器

创建一个图片加载器，用于针对每个经过优化的图片组件使用已部署的 Image Processing API。作为优化措施，请重写到该网域，以便在同一 Firebase App Hosting 网域下提供该网页，并在与 Next.js 应用相同的全局 CDN 后面进行缓存。

首先，将以下字段添加到 next.config.js 文件中：

// @ts-check

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    loader: "custom",
    loaderFile: "./loader.js",
  },
  async rewrites() {
    return [
      {
        source: "/_fah/image/:path*",
        destination:
          "<CLOUD_FUNCTIONS_URL>/:path*",
      },
    ];
  },
}

module.exports = nextConfig;

然后，在根目录中创建一个 loader.js 文件，其中包含以下内容：

"use client"

export default function myImageLoader({ src, width, quality }) {
  if (process.env.NODE_ENV === "development") {
    return src;
  }

  const operations = [
    {
      operation: "input",
      type: "url",
      url: src,
    },
    { operation: "resize", width: width },
    { operation: "output", format: "webp", quality: quality || 75 },
  ];

  const encodedOperations = encodeURIComponent(JSON.stringify(operations));

  return `/_fah/image/process?operations=${encodedOperations}`;
}

创建包含这些更改的提交，并将其推送到您的正式分支。 然后，等待 App Hosting 发布完成。