在 AWS S3 上部署 React 的性能问题

Question

我已经在 S3 上构建并部署了 React 应用程序（我们称之为应用程序 A）并为其启用了“静态网站托管”。此应用程序之前在使用 Node.js 的 EC2 实例上运行。最近，团队中的某个人在 S3 上部署了另一个 React 应用程序 (B)，那时我读到 S3 是轻松部署静态内容的好选择，因此我想到将应用程序 A 移至 S3。但是，在部署应用程序后，我发现它甚至需要花费太多时间（10-15 秒）才能获得登录页面。我登录后，体验还不错，但速度仍然很明显。当它在 EC2 实例上运行时，情况并非如此。

澄清一下，所有这些基于 React 的应用程序，包括应用程序 A 和 B，都只能在公司的网络内使用，并且所有用户都仅来自美国地区。应用程序 A 从其他基于 React 的应用程序（应用程序 B 和 C，均仅托管在 S3 上）和其他应用程序（在 EC2 实例上运行）获取图像（和其他数据）。

我读到的性能问题，并碰上了content-encoding，并cache-control可以同时上传编译版本S3使用的参数。我使用 GZIP 压缩了 CSS 和 JS 文件并添加了元数据，content-encoding但是我没有注意到页面加载有任何显着差异。我留下了cache-control参数（我已将其设置为max-age=31536000因为应用程序 A 已散列文件名），因为在添加此参数后，我在登录应用程序后得到空白页面（不知道为什么）。我还使用 GTMetrix（附有快照）检查了站点性能。在这份报告中，您会注意到它仍然表明可以改进压缩，但是，建议实际上是针对此应用程序 A 连接到的应用程序 B。我认为这对我来说是一个改进的领域。我还与开发人员进行了核实，他告诉我他没有在应用程序（应用程序 A）内部使用压缩，尽管我在将其上传到 S3 时对其进行了压缩。

我读过很多文章，其中人们将 S3 与 CloudFront 或其他 CDN 结合使用。我不确定什么是解决我的问题的正确方法，因为我是第一次进行这样的部署。在将 S3 作为其他环境（QA、UAT、PROD）的部署方法之前，我还必须考虑成本。

考虑到应用程序用户仅在公司网络内，我有以下疑问：
1) CloudFront/CDN 方法是否可以避免，或者这是我解决此性能问题的唯一方法？
2) 如果 S3 上的静态托管很好，那么是否可以对整体设置进行一些修改，以便（从其他 S3 托管的 React 应用程序 C）获取的图像不会通过 Internet 路由，从而节省成本？

我刚刚检查了大部分图像所在的 React 应用程序 C 的 S3 存储桶大小。截至目前，总存储桶大小约为 200 MB，我可以看到的图像的最大文件大小约为 100 KB（大多数都在该范围内）。如果需要更多数据来提供建议，请告诉我。