优化 Next.js 中的图片加载

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

您可以使用图片处理 Firebase 扩展程序配置 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。作为一项优化，请重写为它，以便它在与 Next.js 应用相同的 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 发布完成。