NextJS 在加载时不断重新优化图像

Question

在我的项目中，我想显示一个图像库。next/image它们都通过或next/future/image组件（两者都有这个问题）传递，并且按照预期在负载上进行优化。

问题是，当我刷新时，它们会反复优化，不断导致冷启动行为。

图像 URL 从 传递到组件中getStaticProps，如果它应该保持不变。数据是从 CMS 获取的。

以下是代码摘录（使用next/future/image）：

<Image
 src={image.data.attributes.url}
 width={width}
 height={height}
 alt={alt || ""}
 className={className} // Not used with `next/image`
 {...(priority && { priority })}
/>

当然，我已经next/image多次尝试使用标准组件，删除className，添加layout道具等。相同的行为。

我看到图像文件被缓存在 中./next/cache/images/<imageUUID>/，因此文件仍然存在。当在 Docker 容器中时，我确保为其附加一个卷。无论哪种方式，它都发生在 docker 容器内部和外部。

ctr当使用+ shift+重新加载页面r、在页面之间切换以及切换浏览器/设备时，随着网站加载速度变慢，CPU 使用率每两次重新加载都会跳跃 - 图像试图加载：

我发现它在我的本地计算机上高达 2600%，这将有效锁定我的 EC2 实例。

我预计，当我在启动新的应用程序构建后首次访问该页面时，CPU 使用率会很高，但当我访问该网站时，这种情况会反复发生。在我的机器上，速度是可以忍受的。但当部署到 AWS EC2 实例时，它就会变得不可用。

这是我的 NextJS 配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ["picsum.photos", "<mys3>.s3.us-west-1.amazonaws.com"],
  },
  i18n: {
    locales: ["en"],
    defaultLocale: "en",
  },
  experimental: { images: { allowFutureImage: true } },
};

module.exports = nextConfig;

和我的依赖项：

"dependencies": {
  "@apollo/client": "^3.6.9",
  "classnames": "^2.3.1",
  "graphql": "^16.5.0",
  "next": "^12.2.2",
  "next-themes": "^0.2.0",
  "react": "18.2.0",
  "react-dom": "18.2.0",
  "react-icons": "^4.4.0",
  "react-spinners": "^0.13.3",
  "sharp": "^0.30.7"
},

如果没有sharp，我的 RAM 使用量会增加很多，其中大部分甚至在图像优化后仍然存在SIGKIL，由于 EC2 中的内存限制而导致我的应用程序崩溃。我认为这是我这边的内存泄漏，所以我用Node检查器检查了它。只能看到NextJS的内置squoosh包占用了内存。改用夏普后解决了这个问题。我完全不知道为什么这些问题会首先发生。