为什么为我的 SPA 下载我的图像需要很长时间？

Question

我正在构建一个 React SPA，我想要一张图片作为我主页的背景。图片是1.2mb，第一次加载时有明显的延迟，甚至加载黑白，然后轻弹彩色

所以我尝试了一些方法。我已经压缩了。现在是 700kb。我已将其添加到 s3 存储桶中，而不是在本地使用。我创建了一个云端发行版，我正在请求它。显然，下载后图像很好，我在我的应用程序的不同页面之间滑动并返回主页，因为大概浏览器已缓存。但是，当我硬重新加载时，它似乎总是有点延迟。哦，我还在我的存储桶中的对象中添加了一个缓存控制标签。无论如何我可以解决这个问题或让它加载更快吗？

哦还有一些代码：

const Container = styled.div`
    background-image: url(cloudfront.net/beach.jpg);
    background-size: cover;
    height: 100%;
    position: absolute;

    width: 100%;

    &:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: linear-gradient(to bottom right, #000, #fff);
        opacity: 0.2;
    }
`

我实际上是将它应用到组件本身而不是直接的 html 或 body 元素

Answer 1

在优化图像方面实际上有一些策略，但让我列出 2 个您可以采用的最直接的策略。

1) 您不妨考虑使用webp，而不是使用jpeg 和png 等传统图像格式，因为它提供比前者更好的压缩。

但是，请注意browser support，因为 Safari 仍然不支持它。对于不支持webp的浏览器，您可以考虑使用后备图像格式。

2) 根据视口大小获取图像。您可以存储各种大小的图像，并确保您的应用根据视口大小获取正确的图像。例如，在移动设备上，您应该获取较小的图像。