在 NextJS 中使用 base64 编码图像的性能方面

Question

我正在创建一个可以包含图像和视频的全屏滑块。这些媒体是从 Firebase 加载的，因为客户端需要通过控制面板进行更新。 使用getStaticProps我可以从服务器获取 url 并将其传递给滑块组件，但是滑块的平滑度存在一些延迟和故障，因为我们只是将媒体的下载 url 传递给滑块组件。

因此，据我所知，我正在考虑将url从getStaticProps本身转换为base64并将其传递给滑块。

大多数图像将在 2MB 左右，视频将在 5-10 MB 左右。

1）我知道base64会占用更多的存储空间，但是当我在构建时在服务器中执行此操作时，这只会在用户访问该站点时引起任何其他副作用吗？ 或者这是一个不好的做法？

2）如果上述一个没问题，那么我会在控制台中从getStaticProps收到一些警告，例如
Warning: data for page “/” is 150 kB, this amount of data can reduce performance. 可以避免这种情况吗？ 还是我需要将编码写入某个 JSON 文件并从那里读取？

提前致谢。

Answer 1

我想你部分回答了你的问题

大多数图像将在 2MB 左右，视频将在 5-10 MB 左右。

1. 我知道 base64 会占用更多的存储空间，但是当我在构建时在服务器中执行此操作时，这只会在用户访问该站点时引起任何其他副作用吗？ 或者这是一个不好的做法？

一般来说，在这种情况下，较小尺寸图像的base64是首选，因为您没有指定它们可以上传多少图像和视频 - 随着越来越多的资产被上传，您最终可能会得到一个大的 html。 请记住，base64 本身并不是一种压缩机制

您应该考虑的其他选项

1. 使用next/image并内置图像优化- 这甚至适用于远程图像。
2. 通过 imgix 或 cloudinary 等图像转码服务加载