在部署在 S3 存储桶上的 VueJS 中加载背景图像需要很长时间

Question

我正在使用 VueJS 开发网站。该网站使用图像作为全局背景，我在 App.vue 的样式部分中设置如下：

<style lang="scss">
...
// Mobile version
@media only screen and (max-width: 600px) {
  #app {
    background: url("assets/bg-mobile.png") no-repeat fixed;
    background-size: 100%;
  }
}
// Desktop version
@media only screen and (min-width: 600px) {
  #app {
    background: url("assets/bg-desktop.png") no-repeat center center
      fixed;
    background-size: 100%;
    padding: 0;
  }
}
...
</style>

这很好用，但在生产中，后台加载非常慢，"stripe by stripe"，尤其是桌面版。它是 2500 by 1667 px，大小为 5.41MB。听起来很多，但我希望网站背景看起来不要像素化。

有什么我可以做的吗？玩彩色分辨率？至少，我可以在背景未准备好时阻止页面呈现吗？

我正在使用 Amazon S3 存储桶来部署我的应用程序。

Answer 1

5.14MB 是用户必须下载的相当大的资源。您可能可以在后台准备好之前阻止页面加载，但这确实会损害 SEO（不确定这对您是否重要）并且对于连接速度较慢的用户，页面将需要很长时间才能加载。所以我不会使用这种方法。

您应该尽量优化图像以减小其尺寸。尽量让它不超过需要的大小。

如果是 jpeg 那么您可以考虑使用 progressive jpeg:

https://www.thewebmaster.com/dev/2016/feb/10/how-progressive-jpegs-can-speed-up-your-website/

另一个选项可能是显示默认背景（只是与图像相似的颜色），并在图像完全加载后显示。这样页面加载就不会被图像阻塞。然后图片会被浏览器缓存，所以以后的页面请求会快很多。

不过这只是我的看法。

在部署在 S3 存储桶上的 VueJS 中加载背景图像需要很长时间

Background image taking long to load in VueJS deployed on a S3 bucket

background-image

amazon-s3

vue.js