Next.js 11 - 图像优化在生产环境中不起作用

Question

我对 Next.js 中的图像组件有一个小问题。我使用的是下一个11.0.1版本，在开发和本地环境中没有发现任何问题。图像正在优化，一切正常。然而，我和团队发现当网站部署到生产环境时，图像没有得到优化。我们正在使用亚马逊服务来做到这一点。

这是我的意思的证明：

当地环境：

On wide-screen (1024px width)
Rendered size:  50 x 50 px
File size:  1.3 kB

生产环境：

On wide-screen (1024px width)
Rendered size:  512 x 512 px
File size:  41.5 kB

当然，这并不是一个很大的区别，但我仍然想知道如何在生产环境中解决这个问题。我还添加了对项目本身的强烈依赖，因为我知道它将提高在页面上加载图像的性能。问题可能是亚马逊设置不正确吗？

Next.config.js

module.exports = {
  reactStrictMode: true,
  images: {
    domains: ['avatars.slack-edge.com'],
  },
};

Answer 1

Next.js 图像优化需要尖锐的 npm 包作为依赖。（https://nextjs.org/docs/messages/install-sharp）

确保在生产环境中正确安装了 Sharp npm 包。